{"id":7363,"date":"2020-06-16T10:01:04","date_gmt":"2020-06-16T07:01:04","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7363"},"modified":"2026-06-30T17:22:19","modified_gmt":"2026-06-30T14:22:19","slug":"dhtmlx-suite-6-5","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-6-5\/","title":{"rendered":"DHTMLX Suite 6.5: TypeScript Definitions, Grid and TreeGrid Columns\u2019 Drag-n-Drop, Grouping TreeGrid Data, and New Angular Demo"},"content":{"rendered":"

The summer season at DHTMLX opens with a major release of our JavaScript widget library<\/a> – Suite 6.5.<\/p>\n

The update accommodated some highly demanded features requested by our clients like TypeScript support, grouping TreeGrid data, and drag-n-drop of columns in Grid and TreeGrid. Besides, our development team designed new examples of using Suite UI components with Angular. Other features and improvements cover new configuration options and methods for manipulating content in Grid and TreeGrid, List and DataView, and managing Form controls and Sidebar options.<\/p>\n

Jump into evaluating Suite UI library 6.5<\/a> free of charge for 30 days right now.<\/strong><\/p>\n

Or read the release article to take in every detail.<\/p>\n

Built-in TypeScript Definitions<\/h5>\n

As TypeScript gained considerable popularity among web developers and its support was particularly demanded by our users, we incorporated TypeScript definitions<\/a> into our UI components.<\/p>\n

From now on, built-in type definitions will help you save time and write clean and stable code with the help of type suggestions, autocompletion, and type checking. Check how it works in our code snippet ><\/a>
\n\"TypeScript<\/p>\n

Angular Examples<\/h5>\n

Together with the release of Suite 6.5, our dev team prepared examples of all Suite components with Angular<\/a>. The examples cover basic initialization and usage as well as event listening. The full source code of our components used with Angular can be found on GitHub<\/a>.<\/p>\n

To get the idea of how it works, have a look at the initialization of DHTMLX Calendar with Angular<\/a>:<\/p>\n

import<\/span> {<\/span> Output,<\/span> Component,<\/span> ViewChild,<\/span> OnDestroy,<\/span> ElementRef,<\/span> EventEmitter }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> Calendar as CalendarDHX }<\/span> from 'dhx-suite'<\/span>;<\/span><\/div><\/div>\n

@Component({
\nselector: ‘app-calendar’,
\ntemplate: `<\/p>\n

<\/div>\n

`,
\n})
\nexport class CalendarComponent implements OnDestroy {
\n@ViewChild(‘widget’, { static: true })
\ncontainer: ElementRef;
\ncalendar: CalendarDHX;
\nwait: Promise;<\/p>\n

@Output() ready: EventEmitter = new EventEmitter();<\/p>\n

ngOnInit() {
\nthis.calendar = new CalendarDHX(this.container.nativeElement, {
\ncss: ‘dhx_widget–bordered’,
\nvalue: new Date(),
\n});
\n}<\/p>\n

ngOnDestroy() {
\nthis.calendar && this.calendar.destructor();
\n}
\n}<\/p>\n

Check full source code on GitHub ><\/a><\/p>\n

Besides, our team revised DHTMLX React examples on GitHub and got down to preparing samples with Vue.js.<\/p>\n

Dragging and Dropping Columns in Grid and TreeGrid [PRO]<\/h5>\n

\"Drag-n-drop
\nCheck the snippet ><\/a><\/p>\n

In addition to reordering rows, starting from v6.5, it became possible to move Grid and TreeGrid columns via drag-n-drop. To enable this functionality, you only need to specify the dragItem: “column”<\/strong> property in the configuration of Grid<\/a> or TreeGrid<\/a>:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\ncolumns:<\/span> [<\/span>\/\/ columns config],<\/span>
\ndragItem:<\/span>"column"<\/span>,<\/span>
\ndata:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

If you need to prevent a particular column from being moved, you can add the draggable: false<\/strong> option to its config:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\ncolumns:<\/span> [<\/span>
\n{<\/span> width:<\/span> 200<\/span>,<\/span> id:<\/span> "country"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Country"<\/span> }<\/span>]<\/span>,<\/span> draggable:<\/span> false<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "land"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Land"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "density"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Density"<\/span> }<\/span>]<\/span>,<\/span> draggable:<\/span> false<\/span> }<\/span>
\n]<\/span>,<\/span>
\ndata:<\/span> dataset,<\/span>
\ndragItem:<\/span> "column"<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Grouping TreeGrid Data<\/h5>\n

Another long-awaited feature of Suite 6.5 is the ability to group data in TreeGrid columns according to specific criteria.<\/p>\n

A basic example is grouping TreeGrid data<\/a> by values of a particular column. In order to implement this functionality, you need to make use of the groupBy()<\/strong> method and pass the id of the column as its parameter:<\/p>\n

treegrid.groupBy<\/span>(<\/span>"age"<\/span>)<\/span>;<\/span><\/div><\/div>\n

However, some use cases presuppose a more advanced approach. For instance, we need to group countries according to their size and split them into three categories: small, medium, and big. TreeGrid enables you to pass a function with a rule as a parameter to the groupBy()<\/strong> method, which will determine how to group data.<\/p>\n

In the example below, we define that all countries with an area less than 25000 square km fall into the “Small” group, while the “Medium” group includes countries smaller than 60000 square km. If there are countries with values less than 0, they are categorized as N.A. The rest of the countries constitute the “Big” group:<\/p>\n

treegrid.groupBy<\/span>(<\/span>function<\/span> (<\/span>item)<\/span> {<\/span>
\nif<\/span> (<\/span>!<\/span>item.area<\/span> ||<\/span> item.area<\/span> &<\/span>lt;<\/span> 0<\/span>)<\/span> {<\/span>
\nreturn<\/span> "N.A."<\/span>;<\/span>
\n}<\/span>
\nif<\/span> (<\/span>item.area<\/span> &<\/span>lt;<\/span> 25000<\/span>)<\/span> {<\/span>
\nreturn<\/span> "Small"<\/span>;<\/span>
\n}<\/span> else<\/span> if<\/span> (<\/span>item.area<\/span> &<\/span>lt;<\/span> 60000<\/span>)<\/span> {<\/span>
\nreturn<\/span> "Medium"<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> "Big"<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Moreover, you can modify the title of a group by setting a template with the help of the groupTitleTemplate<\/strong><\/a> configuration option. Thus, you can include the group name and any other attributes you need there. For instance, in the sample below, group titles include not only their names but also the calculated average density of countries:
\n\"GroupingCheck the sample ><\/a><\/p>\n

groupTitleTemplate:<\/span> function<\/span>(<\/span>groupName,<\/span> items)<\/span> {<\/span>
\nreturn<\/span> groupName +<\/span> " (Avg. Density: "<\/span> +<\/span> Math<\/span>.floor<\/span>(<\/span>items.reduce<\/span>(<\/span>(<\/span>acc,<\/span> i)<\/span> =&<\/span>gt;<\/span> acc +<\/span> Number<\/span>.parseInt<\/span>(<\/span>i.density<\/span>)<\/span>,<\/span> 0<\/span>)<\/span>\/<\/span>items.length<\/span>)<\/span> +<\/span> ")"<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n
Changing the Alignment of Columns in Grid and TreeGrid<\/h5>\n

V6.5 enriched the abilities of Grid and TreeGrid with one more configuration option for aligning the content<\/a> of columns and their headers. The new align<\/strong> config allows you to implement left, right, or center alignment of content:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\ncolumns:<\/span> [<\/span>
\n{<\/span> id:<\/span> "name"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> title:<\/span> "Name"<\/span>,<\/span> align:<\/span> "center"<\/span> }<\/span>]<\/span>,<\/span> align:<\/span> "left"<\/span>}<\/span>
\n\/\/ more options<\/span>
\n]<\/span>,<\/span>
\ndata:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Disabling Tooltips in Grid and TreeGrid<\/h5>\n

Another enhancement concerns the usage of tooltips in DHTMLX Grid and TreeGrid. From now on, you can disable tooltips<\/a> for any chosen element of these components: entire columns or specific cells.<\/p>\n

\"DisablingCheck the sample ><\/a><\/p>\n

It can be done via the tooltip<\/strong> configuration option like in the example below:<\/p>\n

var<\/span> treeGrid =<\/span> new<\/span> dhx.TreeGrid<\/span>(<\/span>"treegrid"<\/span>,<\/span> {<\/span>
\ncolumns:<\/span> [<\/span>
\n{<\/span> width:<\/span> 280<\/span>,<\/span> id:<\/span> "name"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Book Name"<\/span> }<\/span>]<\/span>,<\/span> tooltip:<\/span> true<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 160<\/span>,<\/span> id:<\/span> "price"<\/span>,<\/span> type:<\/span> "string"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Terms and conditions"<\/span>,<\/span> colspan:<\/span> 2<\/span> }<\/span>,<\/span> {<\/span> text:<\/span> "Price"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 160<\/span>,<\/span> id:<\/span> "cover"<\/span>,<\/span> type:<\/span> "string"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span>}<\/span>,<\/span> {<\/span> text:<\/span> "Cover"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 160<\/span>,<\/span> id:<\/span> "ships"<\/span>,<\/span> type:<\/span> "string"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Ships in"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n{<\/span> width:<\/span> 160<\/span>,<\/span> id:<\/span> "inStock"<\/span>,<\/span> type:<\/span> "string"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "In stock"<\/span> }<\/span>]<\/span> }<\/span>
\n]<\/span>,<\/span>
\ndata:<\/span> dataset,<\/span>
\ntooltip:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Adjusting Columns’ Width to Their Footer in Grid and TreeGrid<\/h5>\n

As a final touch, we updated the adjust<\/strong><\/a> property in the configuration of Grid and TreeGrid components. Now the width of columns (all at once or separate ones) can be adjusted to the width of their footer:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\ncolumns:<\/span> [<\/span>\/\/ columns config],<\/span>
\nadjust:<\/span> "footer"<\/span>,<\/span>
\ndata:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Manipulating the Selection of Items in DataView and List<\/h5>\n

V6.5 provides you with the ability to manage the selection of DataView<\/a> and List<\/a> items with the help of the newly introduced configuration options and methods.<\/p>\n

Starting with v6.5, the selection<\/strong> configuration property serves to enable and disable items selection:<\/p>\n

var<\/span> dataview =<\/span> new<\/span> dhx.DataView<\/span>(<\/span>"dataview"<\/span>,<\/span> {<\/span>
\nselection:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Manipulating the Visibility of Form and its Controls<\/h5>\n

V6.5 delivered plenty of new methods and options for improving your work with DHTMLX Form.<\/p>\n

Now it’s much easier to manage the visibility of the entire Form as well as separate controls. You can make a form hidden via the new hidden<\/strong><\/a> configuration property or using the hide<\/strong><\/a> method. The show<\/strong><\/a> method makes a form visible. The isVisible<\/strong><\/a> method enables you to check if a form is visible at the moment.<\/p>\n

You can apply the same methods to manipulate the visibility of Form controls (buttons, input fields, select boxes, etc.). In order to add interactivity to your form, you can attach new event handlers to Form controls: afterHide<\/strong><\/a>, afterShow<\/strong><\/a>, beforeHide<\/strong><\/a>, and beforeShow<\/strong><\/a>.<\/p>\n

Besides, we enriched the abilities of the select control and simpleVault control.<\/p>\n

Now you can get an array of all options of the select control<\/a> via the getOptions()<\/strong> method. The setOptions()<\/strong> method enables you to modify select options dynamically.<\/p>\n

New methods of the simpleVault<\/a> control allow you to open the dialog box and select files for uploading via the selectFile()<\/strong> method, send a POST request for uploading files to the server via the send()<\/strong> method and specify the default list of loaded files via the setValue()<\/strong> method.<\/p>\n

Selecting Sidebar Items<\/h5>\n

DHTMLX Sidebar was also updated with new methods for selecting and deselecting Sidebar options as well as checking if an option is selected or not. Check the sample ><\/a><\/p>\n

Now that you have learned about the update of our Suite UI library v6.5, we invite you to test all the components during a free 30-day evaluation period<\/strong><\/a>.<\/p>\n

We’re looking forward to your feedback – feel free to let us know what you think in the comment section below or via our email: contact@dhtmlx.com<\/a>.<\/p>\n

Current clients are invited to download the latest version in their Client’s Area<\/a>.<\/p>\n

Stay safe and stay tuned for DHTMLX summer updates!<\/p>\n

Get Free Trial v6.5 Now<\/a><\/p>\n

Related Materials:<\/h6>\n

Besides, you can apply the enableSelection<\/strong><\/a> and disableSelection<\/strong><\/a> methods for this purpose.<\/p>\n

\"AdjustingCheck the sample ><\/a><\/p>\n

\"AlignmentCheck the sample ><\/a><\/p>\n

\"GroupingCheck the sample ><\/a><\/p>\n

To help you customize the user experience, we enlarged the list of events with new ones: beforeColumnDrag<\/strong><\/a> and beforeColumnDrop<\/strong><\/a>, which fire before users drag and drop columns.<\/p>\n