{"id":9831,"date":"2022-01-19T11:02:19","date_gmt":"2022-01-19T08:02:19","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9831"},"modified":"2025-03-11T12:52:04","modified_gmt":"2025-03-11T09:52:04","slug":"dhtmlx-suite-7-3-new-treemap-chart-free-text-combobox-input-custom-filters-grid-treegrid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-7-3-new-treemap-chart-free-text-combobox-input-custom-filters-grid-treegrid\/","title":{"rendered":"DHTMLX Suite 7.3: New Treemap Chart, Free Text in ComboBox Input, Custom Filters in Grid and TreeGrid, and More"},"content":{"rendered":"<p>The year 2022 has just begun and we would like to start it with the release of DHTMLX Suite v7.3. The new version of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\" rel=\"noopener\">JavaScript UI widget library<\/a> includes a range of anticipated features and improvements. The primary novelty in v7.3 is a new data visualization option for DHTMLX Chart &#8211; treemap chart. The ComboBox widget now allows expanding a range of options in the drop-down list from the UI. Combo editors of Grid, TreeGrid as well as Combo control of Form also include this functionality. It has become possible to create custom filters in the DHTMLX Grid and TreeGrid. Apart from that, our development team took measures to protect DHTMLX Combo and Message widgets from XSS attacks and provided some improvements to the Suite API.<\/p>\n<p><strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\">Download the latest version 7.3 of DHTMLX Suite &gt;<\/a><\/strong><\/p>\n<h5>New Treemap Chart in DHTMLX Chart<\/h5>\n<p>The list of chart types that can be built with our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxChart\/\" target=\"_blank\" rel=\"noopener\">JavaScript charts component<\/a> is expanded with a <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/charts_overview\/#treemap-chart\" target=\"_blank\" rel=\"noopener\">treemap chart<\/a>. It is designed for depicting and analyzing hierarchically-ordered sets of numerical data (product sales, staff turnover, etc.). Nested rectangular tiles of different colors are commonly used to display data in treemap charts. The dimensions of tiles correlate directly with the quantitative value that each of them represents. With tooltips, legend, and other features provided in this visualization tool, it is much easier to analyze data and detect patterns or inconsistencies.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/p31wzm0b?mode=result\" width=\"100%\" height=\"840\" frameborder=\"0\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<p>The needed type of chart is specified with the <strong>type:\u201dtreeMap\u201d<\/strong> property in the configuration object. Legend items are placed horizontally or vertically using the <strong>direction<\/strong> property in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_legend_config\/\" target=\"_blank\" rel=\"noopener\">legend<\/a> config. More details on the initialization process can be found in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/initialization\/\" target=\"_blank\" rel=\"noopener\">documentation<\/a>.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/fmgnlue4?mode=result\" width=\"100%\" height=\"840\" frameborder=\"0\" class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<p>You can also create a treemap chart where rectangular tiles are arranged into groups like in the example above. Moreover, it is possible to expand\/collapse each group of tiles by clicking on their titles.<\/p>\n<h5>Adding New Options into ComboBox from UI<\/h5>\n<p>Previously, JavaScript select boxes built with the DHTMLX ComboBox could contain only predefined options. Starting from v7.3, our widget allows <a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/configuration\/#editable-combobox\" target=\"_blank\" rel=\"noopener\">adding free text as a new value for the ComboBox input right from UI<\/a>. This feature can be implemented with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_newoptions_config\/\" target=\"_blank\" rel=\"noopener\">newOptions<\/a><\/strong> property that has become a part of the ComboBox API. It is enabled by setting the property value to <em>true<\/em>.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> combobox <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Combobox<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;combobox&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\nmultiselection<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\nnewOptions<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><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9833\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/01\/image2.gif\" alt=\"DHTMLX Suite 7.3 - adding new options in the ComboBox\" width=\"804\" height=\"388\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/ui7pi7ty\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><br \/>\nAfter entering a new value in the input field, there are two ways for end-users to add a new option to the collection of Combo options:<\/p>\n<ul>\n<li>Press the ENTER button<\/li>\n<li>Click on the emerging text (Create &#8220;newValue&#8221;) in the drop-down list.<\/li>\n<\/ul>\n<p>Alternatively, you can make use of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_addoption_method\/\" target=\"_blank\" rel=\"noopener\">addOption()<\/a><\/strong> method added to the ComboBox API for this purpose.<\/p>\n<p>This new functionality has become available in the Combo control of the Form widget as well as in the ComboBox editor embedded in the Grid and TreeGrid components.<\/p>\n<p>We added a new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\">editorConfig<\/a><\/strong> property for columns of the DHTMLX Grid and TreeGrid. It comes with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/combo\/api_combo_properties\/\" target=\"_blank\" rel=\"noopener\">newOptions<\/a><\/strong> attribute that gives an opportunity for users to add custom text in the ComboBox editor (<strong>editorType: &#8220;combobox&#8221;<\/strong>). You just need to set the value of the attribute to <em>true<\/em> in the configuration of the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#editable-combobox\" target=\"_blank\" rel=\"noopener\">Grid<\/a>\/<a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#editable-combobox\" target=\"_blank\" rel=\"noopener\">TreeGrid<\/a> column to enable it.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9837\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/01\/image4.gif\" alt=\"DHTMLX Suite 7.3 - adding new options in the Grid column\" width=\"804\" height=\"488\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/1mxmshax\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<p>The newly added option will also be shown in the header\/footer filter of the column if it is specified in the Grid\/TreeGrid.<\/p>\n<p>The <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/combo\/api_combo_properties\/\" target=\"_blank\" rel=\"noopener\">newOptions<\/a><\/strong> property can be applied to the Combo control of the Form widget, enabling similar functional capability. The <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_addoption_method\/\" target=\"_blank\" rel=\"noopener\">addOption()<\/a><\/strong> method is also available for adding arbitrary input:<\/p>\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;combo&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">getWidget<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addOption<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;new_value&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>When a new option is added to the dropdown list by users, the Combo control (just like the ComboBox widget) calls the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_beforeadd_event\/\" target=\"_blank\" rel=\"noopener\">beforeAdd<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_afteradd_event\/\" target=\"_blank\" rel=\"noopener\">afterAdd<\/a><\/strong> events from the ComboBox data collection. If it is necessary to prevent users from entering any specific values, you can apply the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/data_collection\/api\/datacollection_beforeadd_event\/\" target=\"_blank\" rel=\"noopener\">beforeAdd<\/a><\/strong> event. For instance, you can prohibit adding options with the value &#8220;new&#8221; in the following way:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">combobox.<span class=\"me1\">data<\/span>.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;beforeAdd&quot;<\/span><span class=\"sy0\">,<\/span> item <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> item.<span class=\"me1\">value<\/span> <span class=\"sy0\">!==<\/span> <span class=\"st0\">&quot;new&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In addition, we added a new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/localization\/\" target=\"_blank\" rel=\"noopener\">createItem<\/a><\/strong> locale option that helps to adapt the Create option to any language.<\/p>\n<h5>Custom Filters in Grid and TreeGrid Components<\/h5>\n<p>DHTMLX Suite v7.3 expands customization options in the Grid and TreeGrid components. Now you are able to <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#customizing-headerfooter-filters\" target=\"_blank\" rel=\"noopener\">create custom header and footer filters<\/a> for facilitating user experience in data management. To do that, we\u2019ve introduced a new property of the column&#8217;s header\/footer named <strong>customFilter<\/strong> intended for setting your own filtering logic in <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\">Grid<\/a>\/<a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/api_gridcolumn_properties\/\" target=\"_blank\" rel=\"noopener\">TreeGrid<\/a>. It should be emphasized that this property is applicable only when <strong>content: &#8220;inputFilter&#8221; | &#8220;selectFilter&#8221; | &#8220;comboFilter&#8221;<\/strong> is specified.<\/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 \/>\ncolumns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\nwidth<span class=\"sy0\">:<\/span> <span class=\"nu0\">150<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;population&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\nheader<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Population&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\ncontent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;inputFilter&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"co1\">\/\/ selects values greater than the entered value multiplied by 100 million<\/span><br \/>\ncustomFilter<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> match<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> value <span class=\"sy0\">&amp;<\/span>gt<span class=\"sy0\">;<\/span> match <span class=\"sy0\">*<\/span> <span class=\"nu0\">100000000<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\nwidth<span class=\"sy0\">:<\/span> <span class=\"nu0\">150<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;yearlyChange&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\nheader<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Yearly Change&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\ncontent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;selectFilter&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"co1\">\/\/ selects values less than the entered value<\/span><br \/>\ncustomFilter<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> match<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&amp;<\/span>gt<span class=\"sy0\">;<\/span> value <span class=\"sy0\">&amp;<\/span>lt<span class=\"sy0\">;<\/span> match<br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/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> dataset<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\" class=\"aligncenter size-full wp-image-9839\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/01\/image3.gif\" alt=\"DHTMLX Suite 7.3 - custom filters\" width=\"904\" height=\"520\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/gcidkxjg\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<p>The <strong>customFilter<\/strong> property serves as a function for comparing the value selected in the header filter with each value in the grid column and returns either TRUE or FALSE as a result. Users will see only the options that meet the specified criteria.<\/p>\n<h5>Other Improvements<\/h5>\n<p>The DHTMLX development team added the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/list\/api\/list_htmlenable_config\/\" target=\"_blank\" rel=\"noopener\">htmlEnable<\/a><\/strong> property to configurations of the Message, ComboBox, and List widgets. This property serves to disable the display of the HTML content, thereby eliminating the threat of XSS attacks.<\/p>\n<p>Now if you provide the &#8220;<strong>id-value<\/strong>&#8221; combinations for options of the &#8220;combobox&#8221; or &#8220;select&#8221; editor in a Grid column, both the editor and a grid cell will display the value of the option by its id.<\/p>\n<p>The Toolbar widget has been complemented with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/tabbar\/api\/tabbar_beforechange_event\/\" target=\"_blank\" rel=\"noopener\">beforeChange<\/a><\/strong> event which fires before a user switches an active tab by clicking on another one. It can be helpful if you need to prevent switching to certain tabs.<\/p>\n<p>Visit the following <a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-73\" target=\"_blank\" rel=\"noopener\">documentation page<\/a> to become familiar with new features in more detail and a slew of fixes delivered by our team.<\/p>\n<p>Take advantage of a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\">free 30-day evaluation version<\/a> to estimate the new DHTMLX Suite 7.3 in practice. Our existing clients can download the latest version via their <a href=\"https:\/\/dhtmlx.com\/clients\/\" target=\"_blank\" rel=\"noopener\">Client\u2019s Area<\/a>.<\/p>\n<p>Share your impressions on this update in the comments below and stay tuned for future releases from DHTMLX.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-73\" target=\"_blank\" rel=\"noopener\">What\u2019s new in v7.3<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/\" target=\"_blank\" rel=\"noopener\">DHTMLX Suite documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/basic\" target=\"_blank\" rel=\"noopener\">DHTMLX Suite code snippets<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\" rel=\"noopener\">Free 30-day evaluation version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The year 2022 has just begun and we would like to start it with the release of DHTMLX Suite v7.3. The new version of our JavaScript UI widget library &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":9834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,10],"class_list":["post-9831","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\/9831","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=9831"}],"version-history":[{"count":19,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9831\/revisions"}],"predecessor-version":[{"id":13525,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9831\/revisions\/13525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/9834"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=9831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=9831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=9831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}