{"id":9122,"date":"2021-08-04T10:54:03","date_gmt":"2021-08-04T07:54:03","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9122"},"modified":"2026-01-30T12:00:55","modified_gmt":"2026-01-30T09:00:55","slug":"dhtmlx-suite-7-2-new-form-control-custom-scroll-tree-templates","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-7-2-new-form-control-custom-scroll-tree-templates\/","title":{"rendered":"DHTMLX Suite 7.2: New Form Control, Multiselect Editor and Filter for Grid and TreeGrid, Custom Scrollbar, Templates for Tree, and Much More"},"content":{"rendered":"<p>We&#8217;re excited to introduce the new release of DHTMLX Suite v7.2! The update brings long-awaited modifications to DHTMLX Form thus enabling you to attach HTML content or combine other widgets. We also improved DHTMLX Grid and TreeGrid functionality allowing you to apply a new column editor type and reorder both columns and rows in the same datagrid. Besides, we added the ability to set a custom scrollbar, create templates for Tree items, improve a Toolbar with a datepicker control, and extended the API of other widgets.<\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\"><strong>Download a free trial version 7.2 right now &gt;<\/strong><\/a><\/p>\n<h5>New Form Control [PRO]<\/h5>\n<p>At numerous requests of DHTMLX users, we&#8217;ve included the ability to attach HTML code as well as any DHTMLX widgets to the Form. Starting from v7.2, you can use a <a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/container\/\" target=\"_blank\" rel=\"noopener\">Container control<\/a> to improve your form with custom HTML content or combine different UI widgets.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/cnxi9eqq?mode=result\" width=\"100%\" height=\"840\" frameborder=\"0\"><\/iframe><\/p>\n<p>To create a form with a container for adding HTML content, you have to specify the type of the control <strong>type: &#8220;container&#8221;<\/strong> and use the <strong>attachHTML()<\/strong> method. In case you want to place any of the DHTMLX widgets (except Layout and Form), you have to use the <strong>attach()<\/strong> method. Besides, you can specify Container height and width, set padding between control and border, as well as apply CSS classes with custom settings.<\/p>\n<p>Please note that the ability to add HTML code or DHTMLX widgets to the Form is available in the PRO edition of DHTMLX library only.<\/p>\n<h5>Custom Scrollbar [PRO]<\/h5>\n<p>DHTMLX Suite v7.2 makes it possible to add a <a href=\"https:\/\/docs.dhtmlx.com\/suite\/common_features\/custom_scroll\/\" target=\"_blank\" rel=\"noopener\">custom scrollbar<\/a> to your web apps and interfaces. From now on, you can replace a standard browser scrollbar by a clear elegant scroll with a grey semi-transparent design.<\/p>\n<p>We also modified scrolling behavior. Thus, a scroll changes size when scrolling while a bar becomes visible when a user hovers the mouse over it. For instance, you can see how to set a custom scroll in List and DataView widgets <a href=\"https:\/\/snippet.dhtmlx.com\/gjsbvzdk\" target=\"_blank\" rel=\"noopener\">in this code snippet<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9125\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/08\/custom_scroll_optimus-9a17afdaf2ba45dc68ff9e7b306df6c9.png\" alt=\"dhtmlx suite custom scrollbar\" width=\"947\" height=\"576\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/08\/custom_scroll_optimus-9a17afdaf2ba45dc68ff9e7b306df6c9.png 947w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/08\/custom_scroll_optimus-9a17afdaf2ba45dc68ff9e7b306df6c9-300x182.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/08\/custom_scroll_optimus-9a17afdaf2ba45dc68ff9e7b306df6c9-768x467.png 768w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/demoApps\/dhtmlxHospital\/#patients\" target=\"_blank\" rel=\"noopener\">View live demo &gt;<\/a><\/p>\n<p>You can add a custom scrollbar for all widgets of your app at once. For that, apply the <strong>dhx.scrollViewConfig<\/strong> global variable before initializing the widgets in the following way:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ enable the custom scroll for all available widgets<\/span><br \/>\ndhx.<span class=\"me1\">scrollViewConfig<\/span>.<span class=\"me1\">enable<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"co1\">\/\/ initialize a widget<\/span><br \/>\n<span class=\"kw1\">const<\/span> list <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">List<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;list_container&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\nitemHeight<span class=\"sy0\">:<\/span> <span class=\"nu0\">30<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>To activate an individual scrollbar for a separate widget, you have to specify the <strong>enable()<\/strong> method of the <strong>scrollView<\/strong> object after initializing the component. You can restore a default scrollbar by using the <strong>disable()<\/strong> method:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ initialize the widget<\/span><br \/>\n<span class=\"kw1\">const<\/span> list <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">List<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;list&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\ntemplate<span class=\"sy0\">:<\/span> listTemplate<span class=\"sy0\">,<\/span><br \/>\nitemHeight<span class=\"sy0\">:<\/span> <span class=\"nu0\">52<\/span><span class=\"sy0\">,<\/span><br \/>\nheight<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;100%&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\ndragMode<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;both&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nlist.<span class=\"me1\">data<\/span>.<span class=\"me1\">load<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"co1\">\/\/ enable custom scroll<\/span><br \/>\nlist.<span class=\"me1\">scrollView<\/span>.<span class=\"me1\">enable<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"co1\">\/\/ disable custom scroll<\/span><br \/>\nlist.<span class=\"me1\">scrollView<\/span>.<span class=\"me1\">disable<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You&#8217;re free to modify the behavior of a custom scrollbar via the <strong>dhx.scrollViewConfig<\/strong> variable. For example, you can decide whether to hide scrollbars when moving a cursor to another widget using the <strong>autoHide<\/strong> method. Besides, you can set a time interval before hiding the scrollbar from the page via the <strong>timeout<\/strong> method.<\/p>\n<p>Please note that the ability to add a custom scroll comes with the PRO edition of DHTMLX library only.<\/p>\n<h5>Multiselect Editor and Filter in Grid and TreeGrid Columns<\/h5>\n<p>DHTMLX Grid and TreeGrid widgets provide several types of built-in column editors that allow end-users to modify cell content. From now on, the type list includes a multiselect editor by which users can select one or more options.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/w2cdossn?mode=result\" width=\"100%\" height=\"553\" frameborder=\"0\"><\/iframe><\/p>\n<p>To make it possible to select multiple options, you have to set the <strong>multiselect<\/strong> editor type in the <strong>editorType<\/strong> property. Then you can specify which options to display in a cell and split them using the <strong>,<\/strong> separator. This way, your users may select one option, several or all available options displayed in a dropdown list:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/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 \/>\ncolumns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\nid<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;renewals&quot;<\/span><span class=\"sy0\">,<\/span> type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;string&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\nheader<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Number of renewals&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\neditorType<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;multiselect&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\noptions<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;1 time&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;1-2 times&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;more than 5 times&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"co1\">\/\/ more columns<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\ndata<span class=\"sy0\">:<\/span> data<span class=\"sy0\">,<\/span><br \/>\neditable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The same way of enabling multiple options selection is applicable to TreeGrid columns. You can find out more information about the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#setting-type-of-column-editor\" target=\"_blank\" rel=\"noopener\">multiselect column editor in DHTMLX Grid<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#setting-type-of-column-editor\" target=\"_blank\" rel=\"noopener\">TreeGrid<\/a> in the documentation.<\/p>\n<p>Moreover, your users may now filter <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#headerfooter-content\" target=\"_blank\" rel=\"noopener\">Grid<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#headerfooter-content\" target=\"_blank\" rel=\"noopener\">TreeGrid<\/a> column data by selecting one or several options from the dropdown list. Having set the <strong>comboFilter<\/strong> type in a header\/footer content, you can specify the <strong>multiselection:true<\/strong> option in the <strong>filterConfig<\/strong> property.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/wjhr3fmd?mode=result\" width=\"100%\" height=\"475\" frameborder=\"0\"><\/iframe><\/p>\n<h5>Reordering Both Columns and Rows in Grid and TreeGrid [PRO]<\/h5>\n<p>We enhanced user experience while <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_dragitem_config\/\" target=\"_blank\" rel=\"noopener\">reordering datatable items in DHTMLX Grid<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_dragitem_config\/\" target=\"_blank\" rel=\"noopener\">TreeGrid<\/a> widgets. Starting from v7.2, you can drag and drop grid columns together with rows in the same widget.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/zwc91d50?mode=result\" width=\"100%\" height=\"450\" frameborder=\"0\"><\/iframe><\/p>\n<p>We made this functionality available by specifying the <strong>&#8220;both&#8221;<\/strong> value in the <strong>dragItem<\/strong> configuration property:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/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 \/>\ncolumns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"co1\">\/\/ columns config],<\/span><br \/>\ndragItem<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;both&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\ndata<span class=\"sy0\">:<\/span> dataset<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>You can follow the same way to reorder grid items of the TreeGrid widget, as shown <a href=\"https:\/\/snippet.dhtmlx.com\/ax5vs4a8\" target=\"_blank\" rel=\"noopener\">in this code snippet<\/a>.<\/p>\n<p>We draw your attention that the ability to drag and drop Grid columns is available with the PRO edition of DHTMLX library only.<\/p>\n<h5>Templates for Tree Items<\/h5>\n<p>We improved the functionality of DHTMLX Tree enabling you to modify its look and feel by setting templates for tree nodes. Starting from v7.2, you can create custom templates with HTML content by adding the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree\/api\/tree_template_config\/\" target=\"_blank\" rel=\"noopener\"><strong>template<\/strong><\/a> property and then specifying the following two parameters: <strong>item<\/strong> for a Tree item and <strong>isFolder<\/strong> for a Tree folder.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> tree <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Tree<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;tree&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\ntemplate<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> value <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> isFolder<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"kw1\">const<\/span> template <span class=\"sy0\">=<\/span> `<br \/>\n<span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\n$<span class=\"br0\">&#123;<\/span>value<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;&lt;<\/span>button<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>i<span class=\"sy0\">&gt;&lt;\/<\/span>i<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>button<span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n`<br \/>\n<span class=\"kw1\">return<\/span> isFolder <span class=\"sy0\">?<\/span> <span class=\"kw2\">null<\/span> <span class=\"sy0\">:<\/span> template<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Besides, we added a new <a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree\/api\/tree_eventhandlers_config\/\" target=\"_blank\" rel=\"noopener\"><strong>eventHandlers<\/strong><\/a> property allowing you to set events to any HTML element of the custom template. For instance, you can empower your users to delete an item from the UI by clicking on an icon as on the example below:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/hg3f50td?mode=result\" width=\"100%\" height=\"458\" frameborder=\"0\"><\/iframe><\/p>\n<h5>Ability to Attach Datepicker to Toolbar<\/h5>\n<p>This minor release comes with the ability to <a href=\"https:\/\/docs.dhtmlx.com\/suite\/toolbar\/datepicker\/\" target=\"_blank\" rel=\"noopener\">add a datepicker control to the Toolbar widget<\/a> enabling your users to select a date. You can easily add a control with the help of the <strong>add()<\/strong> or <strong>parse()<\/strong> method. Moreover, you may add an icon to your datepicker and make it shown or hidden via the <strong>show()<\/strong> and <strong>hide()<\/strong> methods correspondingly.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/snippet.dhtmlx.com\/3rotluou?mode=result\" width=\"100%\" height=\"450\" frameborder=\"0\"><\/iframe><\/p>\n<h5>Other Updates<\/h5>\n<p>In this part of the article, you can take a brief look at other enhancements that come with DHTMLX Suite v7.2.<\/p>\n<h6>DataCollection<\/h6>\n<p>We updated the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_save_method\/\" target=\"_blank\" rel=\"noopener\"><strong>save()<\/strong><\/a> method of DataCollection. From now on, the method sends either <strong>POST<\/strong>, <strong>PUT<\/strong>, or <strong>DELETE<\/strong> requests to the backend. Explore the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/integration\/suite_and_backend\/#save-method-getting-editing-deleting-and-sending-data\" target=\"_blank\" rel=\"noopener\">backend demo example<\/a>.<\/p>\n<h6>Form, Combobox, and Slider<\/h6>\n<p>The new <strong>blur()<\/strong> method allows you to remove focus from a form control. Besides, the Form widget (comprising Form controls), as well as Combobox and Slider, now include <strong>blur<\/strong> and <strong>focus<\/strong> events as well as the <strong>keydown<\/strong> which fires when any key is pressed. More detailed information about these new methods and events is <a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-72\" target=\"_blank\" rel=\"noopener\">in the documentation<\/a>.<\/p>\n<p>We also added <a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_beforeopen_event\/\" target=\"_blank\" rel=\"noopener\"><strong>beforeOpen<\/strong><\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_afteropen_event\/\" target=\"_blank\" rel=\"noopener\"><strong>afterOpen<\/strong><\/a> events which fire while a user opens an option list in Combobox.<\/p>\n<h6>Grid and TreeGrid<\/h6>\n<p>Having set the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#setting-type-of-column-editor\" target=\"_blank\" rel=\"noopener\"><strong>&#8220;id-value&#8221;<\/strong><\/a> combination for the combo editor option, you can display different values in the grid cell and combo editor. This also <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#setting-type-of-column-editor\" target=\"_blank\" rel=\"noopener\">works with the TreeGrid combobox editor<\/a>.<\/p>\n<p>You can turn off column sorting by adding <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\"><strong>headerSort<\/strong><\/a> property in the header config option. The <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\"><strong>sortAs<\/strong><\/a> property allows you to set custom sorting. The same functionality is available in the TreeGrid widget via <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\"><strong>headerSort<\/strong><\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\"><strong>sortAs<\/strong><\/a> properties.<\/p>\n<h6>Tree<\/h6>\n<p>You can set a fixed height of a Tree item via the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree\/api\/tree_itemheight_config\/\" target=\"_blank\" rel=\"noopener\"><strong>itemHeight<\/strong><\/a> property. It&#8217;s also possible to edit multiline item content after specifying the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree\/api\/tree_editable_config\/\" target=\"_blank\" rel=\"noopener\"><strong>editable:true<\/strong><\/a> config option.<\/p>\n<h6>Toolbar<\/h6>\n<p>We added the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/toolbar\/api\/toolbar_inputchange_event\/\" target=\"_blank\" rel=\"noopener\"><strong>inputChange<\/strong><\/a> event allowing you to track and react to the changes of the value in the input control.<\/p>\n<p>You can review all DHTMLX Suite v7.2 updates and fixes by checking the entire &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-72\" target=\"_blank\" rel=\"noopener\">What&#8217;s new<\/a>&#8221; list in the documentation.<\/p>\n<p>Current clients can access the latest version of the JavaScript UI library in their <a href=\"https:\/\/dhtmlx.com\/clients\/\" target=\"_blank\" rel=\"noopener\">Client&#8217;s Area<\/a>.<\/p>\n<p>Feel free to estimate new functionality by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\"><strong>free 30-day trial version<\/strong><\/a>.<\/p>\n<p>If you still have questions or would like to share your ideas or suggestions, let&#8217;s discuss them in the comment section below.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-72\" target=\"_blank\" rel=\"noopener\">Full What&#8217;s new in v7.2 list<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\">Free 30-day trial version<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/cwiuna9l?tag=suite\" target=\"_blank\" rel=\"noopener\">Code snippets<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/demoApps\/\" target=\"_blank\" rel=\"noopener\">Demo apps built with DHTMLX Suite widgets<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re excited to introduce the new release of DHTMLX Suite v7.2! The update brings long-awaited modifications to DHTMLX Form thus enabling you to attach HTML content or combine other &#8230;<\/p>\n","protected":false},"author":101013,"featured_media":9124,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,10],"class_list":["post-9122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9122","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\/101013"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=9122"}],"version-history":[{"count":22,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9122\/revisions"}],"predecessor-version":[{"id":13827,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9122\/revisions\/13827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/9124"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=9122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=9122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=9122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}