{"id":14088,"date":"2025-07-15T11:11:53","date_gmt":"2025-07-15T08:11:53","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=14088"},"modified":"2026-10-22T01:08:34","modified_gmt":"2026-10-21T22:08:34","slug":"dhtmlx-suite-9-2","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-9-2\/","title":{"rendered":"DHTMLX Suite 9.2: Grid with History Management, Spreadsheet-Like Interactions, Improved Drag-and-Drop, and More"},"content":{"rendered":"

We are thrilled to present a new update to our JavaScript UI widgets library<\/a>, bringing the Suite’s Grid widget to a new level. While nominally it is a minor release, it introduces a range of API modules that will enable developers to configure more interactive and user-friendly data tables with spreadsheet-like capabilities. To be specific, this update enriches our JavaScript Grid<\/a> with history management, clipboard operations, advanced data selection, and new range selection options. These new API modules come with advanced settings. Moreover, you’ll certainly enjoy seeing significant enhancements in drag-and-drop functionality, a new approach to exporting Grid data to Excel, updated integration samples with top JavaScript frameworks, and more.<\/p>\n\n\t\t

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

Get ready to meet the new Suite 9.2 with features that are typically reserved for major version jumps!<\/p>\n

History Module (PRO)<\/h5>\n

Data editing is an integral part of working with JavaScript data tables, where errors or accidental changes are not rare. To ensure greater control over recent grid interactions, DHTMLX Grid v9.2 introduces the History module<\/a>. It is designed to automatically track user actions via the UI (like cell edits, structural changes, content clearing, etc.) and temporarily store them, thereby maintaining a reliable record of changes within the grid. Also, the module allows adding undo\/redo<\/a> capabilities for reverting to previous states or repeating actions using the corresponding operations.<\/p>\n

To enable this functionality, you should activate the history<\/a><\/strong> property in the Grid configuration. This property includes the limit<\/strong> parameter aimed at specifying the number of actions to be recorded in the grid table history. <\/p>\n

For instance, the data table configuration below includes the history module with a limit of 10 actions:<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns,<\/span>
\n    data,<\/span>
\n    clipboard:<\/span> true<\/span>,<\/span>
\n    history:<\/span> {<\/span>
\n        limit:<\/span> 10<\/span>,<\/span>\/\/ Limits the history to 10 actions<\/span>
\n    }<\/span>,<\/span>
\n    editable:<\/span> true<\/span>,<\/span>
\n    autoWidth:<\/span> true<\/span>,<\/span>
\n    autoHeight:<\/span> true<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The rich API<\/a> of the History module offers a range of methods and events for managing the history of actions within the Grid component, including adding, removing, or clearing table rows, as well as editing individual (or multiple) cells. <\/p>\n

Undo and redo operations are applied to Grid history actions using the undo()<\/a><\/strong> and redo()<\/a><\/strong> methods, respectively. This functionality is quite flexible thanks to the availability of related events in the history config, such as beforeUndo<\/a><\/strong>, afterUndo<\/a><\/strong>, beforeRedo<\/a><\/strong>, and afterRedo<\/a><\/strong>.<\/p>\n

Overall, the History module ensures a smoother and safer editing experience, especially in large or collaborative data tables.<\/p>\n

RangeSelection Module (PRO)<\/h5>\n

The new RangeSelection<\/a> module may seem like a small feature, but it is a crucial part of the new Grid functionalities for effective data management. The module offers the API<\/a> for intuitive management of range selection, which is essential for selecting and handling multiple cells in the grid table.<\/p>\n

In the Grid configuration, you can specify this feature using the rangeSelection<\/a><\/strong> property as a boolean or as an object to fine-tune its behavior.<\/p>\n

rangeSelection:<\/span> true<\/span> \/\/ enables the RangeSelection module<\/span><\/div><\/div>\n

Regarding additional configuration options<\/a> for the RangeSelection module, we can point out the following capabilities:<\/p>\n

To show you how the limit<\/strong> parameter works in action, we set its value to 3 in the example below:
\n\"Undo\/Redo Check the sample ><\/a><\/p>\n