We’re excited to introduce the new release of DHTMLX Suite v7.2! The update brings long-awaited modifications to DHTMLX Form thus enabling you to attach HTML content or combine other widgets. We also improved DHTMLX Grid and TreeGrid functionality allowing you to apply a new column editor type and reorder both columns and rows in the same datagrid. Besides, we added the ability to set a custom scrollbar, create templates for Tree items, improve a Toolbar with a datepicker control, and extended the API of other widgets.
Download a free trial version 7.2 right now >
New Form Control [PRO]
At numerous requests of DHTMLX users, we’ve included the ability to attach HTML code as well as any DHTMLX widgets to the Form. Starting from v7.2, you can use a Container control to improve your form with custom HTML content or combine different UI widgets.
To create a form with a container for adding HTML content, you have to specify the type of the control type: “container” and use the attachHTML() method. In case you want to place any of the DHTMLX widgets (except Layout and Form), you have to use the attach() method. Besides, you can specify Container height and width, set padding between control and border, as well as apply CSS classes with custom settings.
Please note that the ability to add HTML code or DHTMLX widgets to the Form is available in the PRO edition of DHTMLX library only.
Custom Scrollbar [PRO]
DHTMLX Suite v7.2 makes it possible to add a custom scrollbar to your web apps and interfaces. From now on, you can replace a standard browser scrollbar by a clear elegant scroll with a grey semi-transparent design.
We also modified scrolling behavior. Thus, a scroll changes size when scrolling while a bar becomes visible when a user hovers the mouse over it. For instance, you can see how to set a custom scroll in List and DataView widgets in this code snippet.
You can add a custom scrollbar for all widgets of your app at once. For that, apply the dhx.scrollViewConfig global variable before initializing the widgets in the following way:
dhx.scrollViewConfig.enable = true;
// initialize a widget
const list = new dhx.List("list_container", {
itemHeight: 30
});
To activate an individual scrollbar for a separate widget, you have to specify the enable() method of the scrollView object after initializing the component. You can restore a default scrollbar by using the disable() method:
const list = new dhx.List("list", {
template: listTemplate,
itemHeight: 52,
height: "100%",
dragMode: "both",
});
list.data.load(data);
// enable custom scroll
list.scrollView.enable();
// disable custom scroll
list.scrollView.disable();
You’re free to modify the behavior of a custom scrollbar via the dhx.scrollViewConfig variable. For example, you can decide whether to hide scrollbars when moving a cursor to another widget using the autoHide method. Besides, you can set a time interval before hiding the scrollbar from the page via the timeout method.
Please note that the ability to add a custom scroll comes with the PRO edition of DHTMLX library only.
Multiselect Editor and Filter in Grid and TreeGrid Columns
DHTMLX Grid and TreeGrid widgets provide several types of built-in column editors that allow end-users to modify cell content. From now on, the type list includes a multiselect editor by which users can select one or more options.
To make it possible to select multiple options, you have to set the multiselect editor type in the editorType property. Then you can specify which options to display in a cell and split them using the , separator. This way, your users may select one option, several or all available options displayed in a dropdown list:
columns: [
{
id: "renewals", type: "string",
header: [{ text: "Number of renewals" }],
editorType: "multiselect",
options: ["1 time", "1-2 times", "more than 5 times"],
},
// more columns
],
data: data,
editable: true
});
The same way of enabling multiple options selection is applicable to TreeGrid columns. You can find out more information about the multiselect column editor in DHTMLX Grid and TreeGrid in the documentation.
Moreover, your users may now filter Grid and TreeGrid column data by selecting one or several options from the dropdown list. Having set the comboFilter type in a header/footer content, you can specify the multiselection:true option in the filterConfig property.
Reordering Both Columns and Rows in Grid and TreeGrid [PRO]
We enhanced user experience while reordering datatable items in DHTMLX Grid and TreeGrid widgets. Starting from v7.2, you can drag and drop grid columns together with rows in the same widget.
We made this functionality available by specifying the “both” value in the dragItem configuration property:
columns: [// columns config],
dragItem: "both",
data: dataset
});
You can follow the same way to reorder grid items of the TreeGrid widget, as shown in this code snippet.
We draw your attention that the ability to drag and drop Grid columns is available with the PRO edition of DHTMLX library only.
Templates for Tree Items
We improved the functionality of DHTMLX Tree enabling you to modify its look and feel by setting templates for tree nodes. Starting from v7.2, you can create custom templates with HTML content by adding the template property and then specifying the following two parameters: item for a Tree item and isFolder for a Tree folder.
template: ({ value }, isFolder) => {
const template = `
<div className="dhx_tree_template">
<span className="dhx_tree_template__value">${value}</span>
<div className="dhx_tree_template__rows">
<button className="dhx_tree_template__button remove">
<i className="far fa-trash-alt dhx_tree_template__icon dhx_tree_template__icon--danger"></i>
</button>
</div>
</div>
`
return isFolder ? null : template;
}
});
Besides, we added a new eventHandlers property allowing you to set events to any HTML element of the custom template. For instance, you can empower your users to delete an item from the UI by clicking on an icon as on the example below:
Ability to Attach Datepicker to Toolbar
This minor release comes with the ability to add a datepicker control to the Toolbar widget enabling your users to select a date. You can easily add a control with the help of the add() or parse() method. Moreover, you may add an icon to your datepicker and make it shown or hidden via the show() and hide() methods correspondingly.
Other Updates
In this part of the article, you can take a brief look at other enhancements that come with DHTMLX Suite v7.2.
DataCollection
We updated the save() method of DataCollection. From now on, the method sends either POST, PUT, or DELETE requests to the backend. Explore the backend demo example here.
Form, Combobox, and Slider
The new blur() method allows you to remove focus from a form control. Besides, the Form widget (comprising Form controls), as well as Combobox and Slider, now include blur and focus events as well as the keydown which fires when any key is pressed. More detailed information about these new methods and events is in the documentation.
We also added beforeOpen and afterOpen events which fire while a user opens an option list in Combobox.
Grid and TreeGrid
Having set the “id-value” combination for the combo editor option, you can display different values in the grid cell and combo editor. This also works with the TreeGrid combobox editor.
You can turn off column sorting by adding headerSort property in the header config option. The sortAs property allows you to set custom sorting. The same functionality is available in the TreeGrid widget via headerSort and sortAs properties.
Tree
You can set a fixed height of a Tree item via the itemHeight property. It’s also possible to edit multiline item content after specifying the editable:true config option.
Toolbar
We added the inputChange event allowing you to track and react to the changes of the value in the input control.
You can review all DHTMLX Suite v7.2 updates and fixes by checking the entire “What’s new” list in the documentation.
Current clients can access the latest version of the JavaScript UI library in their Client’s Area.
Feel free to estimate new functionality by downloading a free 30-day trial version.
If you still have questions or would like to share your ideas or suggestions, let’s discuss them in the comment section below.