{"id":11250,"date":"2023-04-18T12:00:37","date_gmt":"2023-04-18T09:00:37","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11250"},"modified":"2026-01-23T13:41:08","modified_gmt":"2026-01-23T10:41:08","slug":"dhtmlx-suite-8-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-8-1\/","title":{"rendered":"DHTMLX Suite 8.1 with Autoheight, Export to PDF\/PNG, New Editing Capabilities for Grid and TreeGrid Widgets, and More"},"content":{"rendered":"

Not much time has passed since the major release of our JavaScript UI widgets library<\/a>, but we are ready to take the next step forward. With the active participation of our customers, we quickly managed to make a list of top-priority features and our dev team started working without a moment\u2019s delay. So meet DHTMLX Suite 8.1.<\/p>\n

This minor update mainly aims at improving two popular Suite widgets – Grid and TreeGrid. It includes such new features as auto-height, exporting data tables to PDF and PNG files, and the ability to add individual lists of editor options to any cell of a column. We added abilities to select any number of rows and cells and move rows with drag-and-drop in TreeGrid. Tree and TreeGrid widgets also received a collapsed mode. Apart from that, we updated the exporting API in Charts.
\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Suite v8.1<\/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
\nNow let us review all these novelties in more detail.<\/p>\n
Auto Height Mode in Grid\/TreeGrid (PRO)<\/h5>\n

The new Suite version comes with the ability to set automatic height in Grid and TreeGrid widgets. In practice, this feature can be very useful when resizing data tables built with DHTMLX. For instance, now when end-users decide to add or delete rows, Grid\/TreeGrid will automatically adjust their height to fit all table rows. In other words, tables will expand after adding rows, while removing rows will make them shrink. It will help to solve a common issue such as an empty space between the last row and the bottom of the grid.
\n\"DHTMLXCheck the sample ><\/a><\/p>\n

To enable the auto height mode for DHTMLX Grid, you should set the value of the height<\/a><\/strong> property to “auto” in the Grid configuration object.<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n       \/\/ columns config<\/span>
\n    ]<\/span>,<\/span>
\n    data:<\/span> dataset,<\/span>
\n    adjust:<\/span> true<\/span>,<\/span>
\n    height:<\/span> "auto"<\/span>,<\/span>    
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Note that this feature is available only in the PRO edition of DHTMLX Grid.<\/em><\/p>\n

The same “auto” option is now available in the height<\/a><\/strong> property of TreeGrid. So end-users should not have any problems when expanding and collapsing tree data.<\/p>\n

In both widgets, you can also specify min and max height limits for the container using the min-height<\/strong> and max-height<\/strong> CSS properties:<\/p>\n

<<\/span>style><\/span>
\n    .grid<\/span> {<\/span>
\n        min-<\/span>height:<\/span> 400px;<\/span>
\n        max-<\/span>height:<\/span> 600px;<\/span>
\n   }<\/span>
\n<\/<\/span>style><\/span><\/div><\/div>\n
New Exporting Options for Grid\/TreeGrid<\/h5>\n

When working with large datasets in a tabular form, it is great to have an opportunity to use this information offline. That is why we continue expanding the list of popular exporting options for Suite widgets. Starting with v8.1, Grid and TreeGrid widgets allow exporting data to PDF and PNG formats. These novelties will complement the already available export to CSV and Excel.<\/p>\n

When it comes to implementing exporting from Grid to PDF and PNG files, it is necessary to use pdf()<\/a><\/strong> and png()<\/a><\/strong> methods. They are called using the grid.export<\/strong> object in the following way:<\/p>\n