{"id":12595,"date":"2024-07-16T13:03:49","date_gmt":"2024-07-16T10:03:49","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12595"},"modified":"2024-11-01T13:26:05","modified_gmt":"2024-11-01T10:26:05","slug":"dhtmlx-suite-8-4","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-8-4\/","title":{"rendered":"DHTMLX Suite 8.4 with Multiple API Novelties for Grid\/TreeGrid, Chart, Toolbar, ComboBox, and New Samples"},"content":{"rendered":"

In the rapid world of web development, it is crucial to get all the needed updates and features on time. That’s what we do at DHTMLX – we regularly provide developers with the demanded functionality to help them achieve their goals faster. This time we are excited to present the release of DHTMLX Suite 8.4.<\/p>\n

The new version comes with numerous API updates that will certainly contribute to your experience with popular Suite JavaScript UI widgets<\/a>, such as Grid\/TreeGrid, Combobox, Chart, Form, and Toolbar. <\/p>\n

The DHTMLX Combobox widget offers an opportunity to add your logic in templates applicable in widgets, where Combobox is integrated, namely, Grid, TreeGrid, and Form. The Chart widget now allows specifying a template for showing values in Pie, Pie3D, and Donut charts and adding the header\/footer for an exported chart in PDF and PNG formats. The latter feature is also available in Grid and TreeGrid together with other useful improvements. The updated Toolbar widget enables you to expand items by hovering over toolbar elements with the mouse pointer. Apart from that, we included in v8.4 a collection of new samples that further unveil the capabilities of Suite widgets.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Suite v8.4<\/div>\n\t\t
Estimate the updated functionality for building modern data-intensive apps<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

In this release article, we review all the novelties for each widget in more detail.<\/p>\n

DHTMLX ComboBox: Event Handlers in Custom Templates<\/h5>\n

We start with the new feature in the DHTMLX ComboBox<\/a> widget designed to expand your customization capabilities. From now on, you can add event handlers to HTML elements of a custom template of Combobox items via the new eventHadlers<\/strong> property. <\/p>\n

The eventHandlers<\/strong> object includes a set of key:value<\/strong> pairs, where the key<\/strong> names the event for the handler and the value<\/strong> contains the event object and the id of a Combobox item.<\/p>\n

For instance, you can use the eventHandlers<\/strong> configuration option with the onclick<\/strong> event that fires when an end-user deletes options from the combobox list like in the example below:<\/p>\n

const<\/span> combobox =<\/span> new<\/span> dhx.Combobox<\/span>(<\/span>"combobox"<\/span>,<\/span> {<\/span>
\n    newOptions:<\/span> true<\/span>,<\/span> \/\/ enables the ability to add and save new values from UI<\/span>
\n    itemHeight:<\/span> 40<\/span>,<\/span>
\n    template:<\/span> (<\/span>{<\/span> value,<\/span> src }<\/span>)<\/span> =><\/span> {<\/span>
\n        return<\/span> `
\n            <<\/span>div class<\/span>=<\/span>"list-item"<\/span>><\/span>
\n                <<\/span>div class<\/span>=<\/span>"list-item__content"<\/span>><\/span>
\n                    <<\/span>img class<\/span>=<\/span>"list-item__image"<\/span> src=<\/span>"${src}"<\/span> alt=<\/span>"${value}"<\/span>><\/span>
\n                    <<\/span>span class<\/span>=<\/span>"list-item__value"<\/span>><\/span>${<\/span>value}<\/span><\/<\/span>span><\/span>
\n                <\/<\/span>div><\/span>
\n                <<\/span>button class<\/span>=<\/span>"list-item__button list-item__button--delete"<\/span>><\/span>
\n                    <<\/span>i class<\/span>=<\/span>"dxi dxi-delete-forever"<\/span>><\/<\/span>i><\/span>
\n                <\/<\/span>button><\/span>
\n            <\/<\/span>div><\/span>
\n        `;<\/span>
\n    }<\/span>,<\/span>
\n    eventHandlers:<\/span> {<\/span>
\n        onclick:<\/span> {<\/span>
\n            "list-item__button--delete"<\/span>:<\/span> (<\/span>event,<\/span> id)<\/span> =><\/span> {<\/span>
\n                combobox.data<\/span>.remove<\/span>(<\/span>id)<\/span>;<\/span>
\n                combobox.clear<\/span>(<\/span>)<\/span>;<\/span>    
\n            }<\/span>
\n        }<\/span>
\n    }<\/span>,<\/span>
\n    data,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

When it becomes necessary to disable this feature, you can do it either by returning false from a handler function or by using the stopPropagation()<\/strong> method.<\/p>\n

DHTMLX Grid\/TreeGrid: Combobox Editor with Custom Event Handlers, Header\/Footer in Exported PDF and PNG Files<\/h5>\n

Now we pass on to the most widely used Suite widgets – JavaScript Grid<\/a> and TreeGrid<\/a>. Both widgets are enriched with new configuration options. <\/p>\n

First, the configuration object of the “combobox” column editor for Grid and TreeGrid includes the new eventHandlers<\/strong> option. Initially, we integrated this feature into the Combobox widget used in editors of both Grids as well as in the Form Combo control. It allows setting your logic of handling events assigned to HTML elements of a custom template of Combobox editor items in a column.<\/p>\n

In addition, you also have an opportunity to specify a header and a footer when exporting your JavaScript Grid or TreeGrid to a PDF or PNG file. The corresponding options are added to the configuration object of both widgets’ png()<\/strong> and pdf()<\/strong> export methods.<\/p>\n

grid.export<\/span>.png<\/span>(<\/span>{<\/span>
\n    url:<\/span> "https:\/\/export.dhtmlx.com\/chart\/png\/8.0.0"<\/span>,<\/span>
\n    header:<\/span> "<h2>Header<\/h2>"<\/span>,<\/span>
\n    footer:<\/span> "<h4>Footer<\/h4>"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Moreover, now it is possible to use the majority of Data\/TreeCollection methods during dynamic loading (added in the List widget as well), set Grid\/TreeGrid tooltip as a configuration object and specify various settings such as the delay time for showing\/hiding the tooltip box, its style and position, etc., and apply a filtering function for the Combobox editor in a column.<\/p>\n

DHTMLX Toolbar: New Navigation Option for MenuItem and NavItem Controls<\/h5>\n

The new Suite 8.4 brings in a handy addition to the navigation capabilities of the DHTMLX Toolbar<\/a> widget. From now on, you can enable end-users to see menu options in the toolbar by simply hovering the mouse pointer over them.
\n\"v8.4Check the sample ><\/a><\/p>\n

To do that, you should set the pointer<\/strong> parameter in the new navigationType<\/strong> config added for menuItem<\/strong> and navItem<\/strong> controls of the Toolbar:<\/p>\n

const<\/span> toolbar =<\/span> new<\/span> dhx.Toolbar<\/span>(<\/span>"toolbar_container"<\/span>,<\/span> {<\/span>
\n   navigationType:<\/span> "pointer"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The default value of the navigationType<\/strong> parameter is click<\/strong>, which means that menu items are shown when a user clicks on them.<\/p>\n

DHTMLX Chart: Template for Values, Header\/Footer in Charts Exported in PDF and PNG Formats<\/h5>\n

The Chart widget<\/a> is another popular Suite widget with several improvements incorporated in v8.4.<\/p>\n

Starting from v8.4, you can provide templates for values of data items when building Pie, Pie3D, and Donut charts with DHTMLX. The required template function is specified with the valueTemplate<\/strong> option:<\/p>\n

const<\/span> chart =<\/span> new<\/span> dhx.Chart<\/span>(<\/span>"chart_container"<\/span>,<\/span> {<\/span>
\n   type:<\/span> "pie"<\/span>,<\/span>
\n   series:<\/span> [<\/span>
\n       {<\/span>
\n           value:<\/span> "value"<\/span>,<\/span>
\n           valueTemplate:<\/span> value =><\/span> {<\/span>
\n               return<\/span> (<\/span>value *<\/span> 100<\/span>)<\/span>.toFixed<\/span>(<\/span>2<\/span>)<\/span> +<\/span> "%"<\/span>;<\/span>
\n           }<\/span>
\n       }<\/span>
\n   ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Just like Grid and TreeGrid, DHTMLX Chart enables you to add headers and footers in charts exported in PDF and PNG formats. For this purpose, you can use the corresponding header<\/strong> and footer<\/strong> options in the export<\/strong> object.<\/p>\n

New Samples<\/h5>\n

As a cherry on top, our development team also prepared a pack of new samples that clearly illustrate the practical implementation of specific functionalities in Suite widgets. Here is the list of new samples:<\/p>\n

\"v8.4Check the sample ><\/a><\/p>\n

\"v8.4Check the sample ><\/a><\/p>\n