{"id":13161,"date":"2024-11-26T12:12:07","date_gmt":"2024-11-26T09:12:07","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13161"},"modified":"2024-12-17T17:37:34","modified_gmt":"2024-12-17T14:37:34","slug":"dhtmlx-suite-9-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-9-0\/","title":{"rendered":"DHTMLX Suite 9.0: Grid Widget with Tree Mode, Data Grouping, Customizable Totals, Input Masks, and Much More"},"content":{"rendered":"

DHTMLX Grid has always been the ultimate driver of the Suite’s popularity among web developers. It enriched many business apps with numerous features required for effective presentation and manipulation of large data sets aligned with a user experience. The new v9.0 of our JavaScript UI widgets library<\/a> comes with significant updates for this widget that will bring your data management capabilities to a new level.<\/p>\n

You won\u2019t find the TreeGrid widget in the new Suite version, because now it is a new Grid feature. But the pivotal novelty of this release is row data grouping with extensive customization options via API and UI. Another useful feature that will increase the value of the Grid widget in data analysis is the ability to use custom stats functions and define totals in the header\/footer of your table. In Grid and Form widgets, you can also contribute to enhanced usability during data entry by setting input masks. <\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Suite v9.0<\/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

Let us consider the main features delivered in v9.0 in more detail.<\/p>\n

TreeGrid Becomes a Part of Grid Widget (PRO)<\/h5>\n

DHTMLX TreeGrid has been an extension for the Grid widget, so they have always been very similar in terms of usage and API. That is why merging TreeGrid into Grid is a logical step that broadens the Grid\u2019s applicability in hierarchical data representation with expandable\/collapsible rows. There are other positive results such as unified functionality, faster development, and simplified maintenance. From a technical perspective, this measure is a crucial condition for the biggest feature of this release, namely data grouping, based on the tree structure.<\/p>\n

Now, the Grid API allows configuring JS data tables<\/a> to present flat and hierarchical structures. The tree mode<\/a> with all TreeGrid functionality is enabled with type: “tree”<\/a><\/strong> in the Grid configuration:<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\n    type:<\/span> "tree"<\/span>,<\/span>
\n    columns:<\/span> [<\/span>
\n       \/\/ columns config<\/span>
\n    ]<\/span>,<\/span>
\n    width:<\/span> 400<\/span>,<\/span>
\n    data:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The new mode supports keyboard navigation to ensure convenient management of tree-like data structures with keys and shortcuts. <\/p>\n

Flexible Row Data Grouping (PRO)<\/h5>\n

Starting from v9.0, DHTMLX Grid supports row data grouping. It is a killer feature of this major release designed to simplify the analysis of large datasets by organizing data hierarchically based on selected grouping criteria. Thus, it becomes a powerful tool to promptly notice valuable patterns and trends from aggregated data, facilitating more effective decision-making. <\/p>\n

The great thing is that this feature is implemented with high flexibility in mind, meaning that you can configure grouping according to any project needs. For this purpose, we enriched the Grid API with new properties that allow you to specify grouping details. <\/p>\n

The predefined grouping configuration is implemented via the new group<\/a><\/strong> property. This property serves to specify the behavior, visibility, and appearance of groupings in the table. It also allows managing the group panel, columns\u2019 display, grouping order, and settings related to data aggregation.
\n\"data<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns,<\/span>
\n    group:<\/span> {<\/span>
\n        order:<\/span> [<\/span>"shelter_location"<\/span>]<\/span>
\n    }<\/span>,<\/span>
\n    \/\/more configuration options<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

The group<\/strong> configuration option contains many parameters that will help you modify grouping settings as desired. For instance, you can combine grouping with data aggregation. To do that, you need the fields<\/strong> parameter that sets up the extended configuration for data grouping by certain columns and specifies rules for aggregation and display of total values. The order of grouping is arranged in the corresponding order<\/strong> parameter.<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span> id:<\/span> "country"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Country"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n        {<\/span> id:<\/span> "population"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Population"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n        {<\/span> id:<\/span> "density"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Density (P\/Km\u00b2)"<\/span> }<\/span>]<\/span> }<\/span>
\n    ]<\/span>,<\/span>
\n    group:<\/span> {<\/span>
\n        panel:<\/span> true<\/span>,<\/span>
\n        fields:<\/span> {<\/span>
\n            population:<\/span> {<\/span>
\n                summary:<\/span> "bottom"<\/span>,<\/span>
\n                map:<\/span> {<\/span>
\n                    population:<\/span> [<\/span>"population"<\/span>,<\/span> "sum"<\/span>]<\/span>,<\/span>
\n                    customSummary:<\/span> function<\/span>(<\/span>rows)<\/span> {<\/span>
\n                        return<\/span> rows.length<\/span>;<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            }<\/span>
\n        }<\/span>,<\/span>
\n        order:<\/span> [<\/span>"population"<\/span>]<\/span>
\n    }<\/span>,<\/span>
\n    data:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

In the UI, all that has to be done is simply drag the headers of needed columns into the grouping panel and Grid will automatically create groups based on the values in these columns. End-users can also edit the nesting level of the grouping by reordering items in the panel or removing ones that are no longer needed. The values of grouped columns are sortable.
\n\"data<\/p>\n

If grouping is only relevant for particular grid columns, you should add the groupable<\/a><\/strong> property (and closable<\/a><\/strong>, if needed) to the config of the required column.<\/p>\n

Once the grouping feature is enabled in the Grid configuration, it also becomes available in the DataCollection API<\/a><\/strong>. In v9.0, it includes a range of new methods and events<\/a> for grouping items. For instance, you can group data and divide it into different categories:
\n\"groupingCheck the sample ><\/a><\/p>\n

As a result, this big feature will help you to bridge the gap between raw data and actionable insights. <\/p>\n

Summaries of Values Calculated with Custom Functions<\/h5>\n

Another great novelty delivered for DHTMLX Grid in this major release lies in the area of custom computing. Here we are talking about the ability to redefine the default stats functions and render the summaries of custom calculations for a certain column or the whole JS grid table. This will come in handy in scenarios, where predefined functions (sum, avg, etc.) are not enough. For instance, financial reports or scientific research may have specific data analysis needs that can be addressed with custom calculations and the updated Grid API empowers you to do that. <\/p>\n

The process of generating data summaries in your JavaScript data table includes the following steps:<\/p>\n

1) Defining a function for calculation during the summary list creation.
\nFor this purpose, you need the dhx.methods<\/a><\/strong> helper that serves for defining default statistical functions or creating custom functions like the one below:<\/p>\n

dhx.methods<\/span>.doubleSum<\/span> =<\/span> (<\/span>rows,<\/span> field)<\/span> =><\/span> {<\/span>
\n    return<\/span> rows.reduce<\/span>(<\/span>(<\/span>sum,<\/span> row)<\/span> =><\/span> sum +<\/span> row[<\/span>field]<\/span> *<\/span> 2<\/span>,<\/span> 0<\/span>)<\/span>;<\/span> }<\/span>;<\/span><\/div><\/div>\n

2) Forming a summary list on the required level.<\/p>\n

You can create summaries for a particular column<\/a> or the whole data table<\/a>: <\/p>\n

As for end-users’ capabilities in grouping, they are immense. Want to give end-users full freedom in grouping data by values of one or multiple columns of the grid table? Just enable the groupable<\/a><\/strong> property in the grid<\/strong> config. You can also add the closable<\/a><\/strong> property in this config, allowing users to remove any item from the grouping panel.<\/p>\n