{"id":11654,"date":"2023-08-29T13:33:31","date_gmt":"2023-08-29T10:33:31","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11654"},"modified":"2024-11-01T13:32:25","modified_gmt":"2024-11-01T10:32:25","slug":"dhtmlx-suite-8-2","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-8-2\/","title":{"rendered":"DHTMLX Suite 8.2 with Four New Form Controls, Extended Tooltip Configurability in Grid\/TreeGrid, and Much More"},"content":{"rendered":"<p>We are happy to introduce the release of DHTMLX Suite v8.2! The centerpiece of this minor update is DHTMLX Form. This widget received 4 new much-anticipated controls such as Fieldset, Avatar, Toggle, and ToggleGroup. The next significant result of our work is a range of new configuration options for header\/footer tooltips in Grid and TreeGrid widgets. We should also mention several API updates in DataCollection and TreeCollection that contributed to enhanced data filtering. Moreover, there are plenty of other API improvements and fixes delivered in v8.2.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX Suite v8.2<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for building modern data-intensive apps<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>In this blog post, we provide a detailed overview of this release.<\/p>\n<h5>New Controls for DHTMLX Form<\/h5>\n<p>DHTMLX Form is a popular widget of the Suite <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" rel=\"noopener\" target=\"_blank\">JavaScript UI widget library<\/a> that allows you to implement customizable web forms, which usually serve as a key communication link between a web app and end-users. In v8.2, we expanded the functional capabilities of this widget with 4 new controls. Let us take a closer look at these controls and what they allow you to do.<\/p>\n<h6>Fieldset Control<\/h6>\n<p>The <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/fieldset\/\" rel=\"noopener\" target=\"_blank\">Fieldset<\/a> control is designed to give you complete freedom in grouping other controls within a web form. In other words, this control enables you to visually break the form into several logical sections, thereby making even large forms better structured and more intuitive. It allows you to create complex forms, where one fieldset can contain several other fieldsets with nested controls.<\/p>\n<p>To attach this control to a form built with DHTMLX, you need to add the corresponding control type &#8211; <strong>type: \u201cfieldset\u201d<\/strong>. Multiple <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/fieldset\/api_fieldset_properties\/\" rel=\"noopener\" target=\"_blank\">configuration properties<\/a> give you a wide choice of options for specifying the control settings. For instance, you can give a name to the control, add a necessary label to it, arrange controls inside the group, and much more.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> form <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Form<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;form&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;fieldset&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;General Info&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;between&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cols<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;fieldset&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Personal info&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Name&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Surname&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;fieldset&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Contact info&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;City&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Address&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image4.png\" alt=\"Suite 8.2 - Fieldset control\" width=\"545\" height=\"716\" class=\"alignnone size-full wp-image-11655\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image4.png 545w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image4-228x300.png 228w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><br \/>\n<a href=\"https:\/\/snippet.dhtmlx.com\/lo6g167p?tag=form&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>You can access any control within Fieldset via the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_getitem_method\/\" rel=\"noopener\" target=\"_blank\">getItem()<\/a> method<\/strong> and interact with it using multiple methods and events. For instance, you can iterate through all the nested fieldset elements using the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/fieldset\/fieldset_foreach_method\/\" rel=\"noopener\" target=\"_blank\">forEach()<\/a><\/strong> method. It takes the following parameters:<\/p>\n<ul>\n<li><strong>callback: function<\/strong> &#8211; a function responsible for the iteration process. This function is called with the following arguments:<\/li>\n<\/ul>\n<p>1) <strong>item: object<\/strong> &#8211; the object of an item<br \/>\n2) <strong>index: number<\/strong> &#8211; the index of an item<br \/>\n3) <strong>array: object[]<\/strong> &#8211; an array of iterated items<\/p>\n<ul>\n<li><strong>tree: boolean<\/strong> &#8211; the parameter that determines if all the nested fieldset items should be iterated (false by default)<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">form.<span class=\"me1\">getItem<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;fieldset&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span>item<span class=\"sy0\">,<\/span> index<span class=\"sy0\">,<\/span> arr<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span>index<span class=\"sy0\">,<\/span> item<span class=\"sy0\">,<\/span> arr<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>With the new Fieldset control, you have an effective instrument for grouping various controls within a single web form and flexibly adjusting these structures to your liking.<\/p>\n<h6>Avatar Control<\/h6>\n<p>A standard web form commonly consists of controls for gathering textual data, but it may also be needed to have an option for uploading images. Starting from v8.2, DHTMLX Form allows adding an image to a form using the new <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/avatar\/\" rel=\"noopener\" target=\"_blank\">Avatar<\/a> control. <\/p>\n<p>The sample below gives an opportunity to see how this control works in practice. Here you can add your own image to the form using a placeholder icon or with drag-and-drop, remove it, and play around with the Avatar settings.<br \/>\n<iframe data-src=\"https:\/\/snippet.dhtmlx.com\/87u37hqc?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"460\"class=\"snippet-container js-iframe\"><\/iframe><br \/>\nTo add this control to a web page, you have to specify it in the <strong>type<\/strong> property during the form initialization:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> form <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Form<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;form&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dhx_widget--bordered&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; padding<span class=\"sy0\">:<\/span> <span class=\"nu0\">20<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;avatar&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;label&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Employee photo&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;size&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;medium&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ &quot;small&quot; | &quot;medium&quot; | &quot;large&quot; | number<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;icon&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-person&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;accept&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;image\/*&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;target&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/suite\/backend\/upload&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/Other properties<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/87u37hqc?tag=form&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>As you can see from the piece of code above, this control has a number of <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/avatar\/api_avatar_properties\/\" rel=\"noopener\" target=\"_blank\">properties<\/a> that allow you to define how it will be seen by end-users. It is possible to use the basic control sizing or apply custom sizes, make this type of input obligatory, add help information, set a placeholder icon when there is no image uploaded, etc.<\/p>\n<p>Just like other controls of DHTMLX Form, the Avatar control also comes with a range of <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/api_overview\/#avatar-methods\" rel=\"noopener\" target=\"_blank\">methods<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/api_overview\/#avatar-events\" rel=\"noopener\" target=\"_blank\">events<\/a> enabling you to manipulate this control in a variety of ways.<\/p>\n<p>For instance, you can restrict file selection by applying certain validation rules using the <strong>accept<\/strong> and <strong>validation<\/strong> properties:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> form <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Form<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;form&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dhx_widget--bordered&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; padding<span class=\"sy0\">:<\/span> <span class=\"nu0\">40<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;avatar&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"me1\">accept<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;image\/png&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; validation<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> file <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> file <span class=\"sy0\">&amp;&amp;<\/span> file.<span class=\"me1\">size<\/span> <span class=\"sy0\">&lt;=<\/span> <span class=\"nu0\">2097152<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preMessage<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Choose a png file&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; errorMessage<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;The file size is more than 2Mb, or the field is empty&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; successMessage<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;The file was successfully validated&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The <strong>accept<\/strong> property defines acceptable extensions for uploaded files (image and png), while the <strong>validation<\/strong> property checks whether a file is uploaded and its size is less than 2 MB. You can also use <strong>preMessage<\/strong>, <strong>errorMessage<\/strong>, and <strong>successMessage<\/strong> properties to make the interaction of end-users with the Avatar control completely straightforward. Text messages implemented with these properties will help end-users understand whether they are doing things right when uploading files in the form.<\/p>\n<h6>Toggle and ToggleGroup controls<\/h6>\n<p>Toggle controls are special buttons designed to help end-users to switch between two or more states or options. They are commonly shown as compact buttons with a graphical textual representation of their state. In Suite 8.2, we added two types of toggle buttons for DHTMLX Form:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/toggle\/\" rel=\"noopener\" target=\"_blank\">Toggle<\/a> &#8211; is a single button that operates on the principle of two states (e.g., on\/off)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image5.gif\" alt=\"Suite 8.2 - Toggle control\" width=\"150\" height=\"82\" class=\"alignnone size-full wp-image-11659\" \/><\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">...<br \/>\n<span class=\"me1\">rows<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;toggle&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-eye&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offIcon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-eye-off&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n...<\/div><\/div>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/togglegroup\/\" rel=\"noopener\" target=\"_blank\">ToggleGroup<\/a> &#8211; a group of single-select or multi-select buttons linked together structurally or logically.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image1.gif\" alt=\"Suite 8.2 - ToggleGroup control\" width=\"299\" height=\"80\" class=\"alignnone size-full wp-image-11660\" \/><\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">...<br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;toggleGroup&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; multiselection<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; left<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; center<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; options<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-format-align-left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-format-align-center&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dxi dxi-format-align-right<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; },<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; {<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: &quot;<\/span>space<span class=\"st0\">&quot;,<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: &quot;<\/span>dxi dxi<span class=\"sy0\">-<\/span>format<span class=\"sy0\">-<\/span>line<span class=\"sy0\">-<\/span>spacing<span class=\"st0\">&quot;,<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled: true,<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; }<br \/>\n&nbsp; &nbsp; ]<br \/>\n}<br \/>\n...<\/span><\/div><\/div>\n<p>The ToggleGroup button has more functional capabilities than a simple toggle button. The example with multiselection provided above is just one of the multiple usage scenarios for ToggleGroup. You can find more use cases of the new button types in this <a href=\"https:\/\/snippet.dhtmlx.com\/yqi21ykr?tag=form&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">sample<\/a>.<\/p>\n<h5>Tooltips for Headers and Footers in Grid\/TreeGrid<\/h5>\n<p>The new version of the Suite library expands configuration diversity for tooltips in two widgets for data management &#8211; Grid and TreeGrid. Previously, tooltips for the whole grid were enabled\/disabled via the corresponding <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_tooltip_config\/\" rel=\"noopener\" target=\"_blank\">tooltip<\/a><\/strong> property.  Now you have several new ways to specify individual tooltips for headers and footers. Since all new configuration options are similar for both widgets, let us see how they work using the example of DHTMLX Grid.<\/p>\n<p>First of all, there are new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_headertooltip_config\/\" rel=\"noopener\" target=\"_blank\">headerTooltip<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_footertooltip_config\/\" rel=\"noopener\" target=\"_blank\">footerTooltip<\/a><\/strong> configuration properties that give you full control over tooltips for the grid&#8217;s header and footer, correspondingly:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid_container&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ columns config<\/span><br \/>\n&nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; data<span class=\"sy0\">:<\/span> dataset<span class=\"sy0\">,<\/span><br \/>\n&nbsp; tooltip<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; headerTooltip<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; footerTooltip<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>If necessary, you can also enable tooltips for the header\/footer of a particular grid column. To do that, you should specify the <strong>tooltip<\/strong> property in the corresponding header\/footer object inside the column:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;country&quot;<\/span><span class=\"sy0\">,<\/span> header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Country&quot;<\/span><span class=\"sy0\">,<\/span> tooltip<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;population&quot;<\/span><span class=\"sy0\">,<\/span> header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Population&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ more columns<\/span><br \/>\n&nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; data<span class=\"sy0\">:<\/span> dataset<span class=\"sy0\">,<\/span><br \/>\n&nbsp; tooltip<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Alternatively, you are able to provide custom tooltips for headers\/footers of the whole grid (or a particular column) via templates specified in the <strong>tooltipTemplate<\/strong> configuration property. From now on, a tooltip can also be shown as a value for the complex header\/footer content of a column, such as aggregate functions (&#8220;avg&#8221;, &#8220;sum&#8221;, &#8220;max&#8221;, &#8220;min&#8221;, &#8220;count&#8221;). In addition, you have an opportunity to use templates for any kind of header\/footer content, meaning that you can add tooltips for such elements as filters. Below, you can see how these novelties are implemented and put into practice.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;title&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltipTemplate<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> `Book<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>value<span class=\"br0\">&#125;<\/span>`<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Title&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltipTemplate<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> `Here can be an explanation <span class=\"kw1\">for<\/span> the title of <span class=\"kw1\">this<\/span> column. <span class=\"me1\">You<\/span> can write a <span class=\"kw5\">long<\/span> description.`<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;inputFilter&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltipTemplate<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> `Write something to search by book title`<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;authors&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"me1\">footer<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> content<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;count&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ more columns<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/08\/image2.gif\" alt=\"Suite 8.2 - header\/footer tooltips\" width=\"672\" height=\"532\" class=\"alignnone size-full wp-image-11661\" \/><br \/>\n<a href=\"https:\/\/snippet.dhtmlx.com\/fgstf2mq?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Improved Data Filtering<\/h5>\n<p>Several significant improvements related to data filtering in Suite widgets took place in the APIs of <a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/\" rel=\"noopener\" target=\"_blank\">DataCollection<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree_collection\/\" rel=\"noopener\" target=\"_blank\">TreeCollection<\/a>. The work with temporary and permanent filters became more stable thanks to the updated <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_filter_method\/\" rel=\"noopener\" target=\"_blank\">filter()<\/a><\/strong> method. The second parameter of this method, namely the <strong>config<\/strong> object, now has the <strong>permanent<\/strong> property instead of the deprecated <strong>smartFilter<\/strong> (learn more in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/migration\/#81--82\" rel=\"noopener\" target=\"_blank\">Migration<\/a> section) and the new <strong>id<\/strong> property. Using the <strong>id<\/strong> property, you can identify all applied filters and reset any of them with the help of another novelty &#8211; the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_resetfilter_method\/\" rel=\"noopener\" target=\"_blank\">resetFilter()<\/a><\/strong> method. Moreover, now you can obtain data on all applied filters with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_getfilters_method\/\" rel=\"noopener\" target=\"_blank\">getFilters()<\/a><\/strong> method. And finally, we added the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_filter_event\/\" rel=\"noopener\" target=\"_blank\">filter<\/a><\/strong> event to enable you to keep track of all filtering events. <\/p>\n<h5>Other Improvements<\/h5>\n<p>Now we can proceed with a range of minor but still helpful updates delivered by our development team in Suite v8.2.<\/p>\n<h6>Form<\/h6>\n<p>Apart from the four new controls for DHTMLX Form described above, we should also point out that types of form elements were restructured and the type declaration file (d.ts) was updated. Also, pay attention to the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/simplevault\/\" rel=\"noopener\" target=\"_blank\">SimpleVault<\/a> control with renewed and improved <a href=\"https:\/\/docs.dhtmlx.com\/suite\/category\/simple-vault-api\/\" rel=\"noopener\" target=\"_blank\">API<\/a>.<\/p>\n<h6>Charts<\/h6>\n<p>In DHTMLX Charts, the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_series_config\/\" rel=\"noopener\" target=\"_blank\">series<\/a><\/strong> configuration property was complemented with the <strong>label<\/strong> config option. It will give you a more convenient way to set the text in legends for series in &#8220;line&#8221;, &#8220;spline&#8221;, &#8220;bar&#8221;, &#8220;x-bar&#8221;, &#8220;area&#8221;, &#8220;splineArea&#8221;, &#8220;radar&#8221;, and &#8220;scatter&#8221; chart types.<\/p>\n<p>Visit the following <a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-82\" rel=\"noopener\" target=\"_blank\">documentation page<\/a> to review all the new features and other improvements included in DHTMLX Suite 8.2 in more detail.<\/p>\n<p>We want to remind you that you have an opportunity to test the updated Suite library by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day evaluation version<\/a>. Our existing clients can get access to the latest version via their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<p>And lastly, we invite you to leave your comments on this release in the corresponding section below.<\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-82\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v8.2<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Suite documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/hfmoolvw?mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX Suite code snippets<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We are happy to introduce the release of DHTMLX Suite v8.2! The centerpiece of this minor update is DHTMLX Form. This widget received 4 new much-anticipated controls such as &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":11668,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,6,10],"class_list":["post-11654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-dhtmlxgrid","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=11654"}],"version-history":[{"count":13,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11654\/revisions"}],"predecessor-version":[{"id":11675,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/11654\/revisions\/11675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/11668"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=11654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=11654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=11654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}