{"id":6727,"date":"2019-10-23T14:19:05","date_gmt":"2019-10-23T11:19:05","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6727"},"modified":"2025-03-11T13:18:37","modified_gmt":"2025-03-11T10:18:37","slug":"dhtmlx-suite-6-2-grid-new-editors-row-drag-n-drop-flexible-columns-calendar-range-mode","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-6-2-grid-new-editors-row-drag-n-drop-flexible-columns-calendar-range-mode\/","title":{"rendered":"DHTMLX Suite 6.2: Grid with New Editors, Drag-n-Drop, and Flexible Columns, Calendar Range Mode, and More"},"content":{"rendered":"

Our JavaScript UI widgets<\/a> are empowered with new abilities, boosted performance, and a more developer-friendly API in v6.2. <\/p>\n

Now DHTMLX Grid is equipped with new filter and editor types, drag-n-drop of rows, hiding and resizing of columns, and export to CSV. DHTMLX Calendar receives a new range selection mode. Form and Layout components become much more convenient and flexible to work with due to newly introduced API methods and events. Besides, v6.2 brings out helper guides on how to use DHTMLX default icons and CSS classes to accelerate web development. <\/p>\n

Download evaluation version 6.2<\/a> and try it out in your projects free of charge for 30 days!<\/strong><\/p>\n

Grid with Surpassing Performance and Enriched Functionality<\/h5>\n

First and foremost, v6.2 has made our Grid blazing fast accelerating its speed to 2.5x:<\/p>\n

https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/10\/FastGrid.mp4<\/a><\/video><\/div>\n
New Editor and Filter Types<\/h6>\n

Secondly, the update introduces two new types of editors<\/a> for cells of Grid columns: combobox and checkbox.<\/p>\n

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

A combobox editor represents a dropdown list of options, which can be filtered by typing in text in the editor cell. This type of editor is enabled by setting the editorType: “combobox”<\/strong> property for a particular column and specifying options to choose from:<\/p>\n

{<\/span>
\n   width:<\/span> 160<\/span>,<\/span> id:<\/span> "test"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Test"<\/span> }<\/span>]<\/span>,<\/span> type:<\/span> "string"<\/span>,<\/span>
\n
\n   editorType:<\/span> "combobox"<\/span>,<\/span> options:<\/span> [<\/span>"1 time"<\/span>,<\/span> "1-2 times"<\/span>,<\/span> "more than 5 times"<\/span>]<\/span>
\n}<\/span><\/div><\/div>\n

A checkbox editor can be applied for columns with a binary choice. In order to implement this type of editor, you only need to specify the type: “boolean”<\/strong> property for a column. In case the editing option is enabled in the whole Grid, then the checkbox editor will be switched on for the respective columns by default.<\/p>\n

{<\/span>
\n    \/\/ if the type:"boolean" config is set in the column config, <\/span>
\n    \/\/ there's no need to specify the type of the editor<\/span>
\n    width:<\/span> 160<\/span>,<\/span> id:<\/span> "test"<\/span>,<\/span>
\n    header:<\/span> [<\/span>{<\/span> text:<\/span> "Test"<\/span> }<\/span>]<\/span>,<\/span>
\n
\n    type:<\/span> "boolean"<\/span>
\n}<\/span><\/div><\/div>\n

Apart from the editing functionality, a combo box control can be used as a filter in the Grid header or footer for quickly searching for the necessary data:<\/p>\n

{<\/span>
\n    width:<\/span> 160<\/span>,<\/span> id:<\/span> "renewals"<\/span>,<\/span>
\n
\n    header:<\/span> [<\/span>{<\/span> text:<\/span> "Number of renewals"<\/span> }<\/span>,<\/span> {<\/span> content:<\/span> "comboFilter"<\/span> }<\/span>]<\/span>,<\/span>
\n    type:<\/span> "string"<\/span>,<\/span> editorType:<\/span> "combobox"<\/span>,<\/span>
\n    options:<\/span> [<\/span>"1 time"<\/span>,<\/span> "1-2 times"<\/span>,<\/span> "more than 5 times"<\/span>]<\/span>
\n}<\/span><\/div><\/div>\n

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

Various additional configuration properties allow developers to refine this filter type depending on their needs – for example, load data dynamically while scrolling the list of options. Read more in the documentation ><\/a><\/p>\n

Drag-n-Drop of Rows<\/h6>\n

Starting with v6.2, end users are able to easily rearrange Grid rows by dragging and dropping them with the mouse. Drag-n-drop operations<\/a> can be enabled within one Grid or several Grids according to the specified mode. For instance, here you can see how to drag-n-drop rows within one Grid by setting the dragMode:both<\/strong> property in the configuration object of Grid:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/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>
\n    ]<\/span>,<\/span>
\n    data:<\/span> dataset,<\/span>
\n
\n    dragMode:<\/span> "both"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Manipulating Columns<\/h6>\n

Another enhancement in v6.2 concerns the flexibility of working with Grid columns. The update delivers a wide range of new configuration properties<\/a> for controlling the maximum and minimum column width, making columns hidden, and resizing them from the UI.<\/p>\n

For example, the hidden:true<\/strong> property specified in the config of a column hides it in Grid:<\/p>\n

{<\/span>
\n    width:<\/span> 150<\/span>,<\/span> id:<\/span> "population"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Population"<\/span> }<\/span>]<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\n
\n    hidden:<\/span> true<\/span>,<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "yearlyChange"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Yearly Change"<\/span> }<\/span>]<\/span>
\n}<\/span><\/div><\/div>\n

The resizable:true<\/strong> option specified in the configuration of the whole Grid or a particular column enables manipulating the columns’ size by end users with the help of the mouse:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>\/\/ columns config],<\/span>
\n    data:<\/span> dataset,<\/span>
\n
\n    resizable:<\/span> true<\/span>
\n}<\/span><\/div><\/div>\n
var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid_container"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "test1"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Test1"<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
\n
\n        {<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "test2"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Test2"<\/span> }<\/span>]<\/span>,<\/span> resizable:<\/span> false<\/span> }<\/span>
\n    ]<\/span>,<\/span>
\n    data:<\/span> dataset,<\/span>
\n
\n    resizable:<\/span> true<\/span>
\n}<\/span><\/div><\/div>\n

On top of all, you can predefine the limits, within which columns can be resized from the UI, by defining their minimum and maximum width.<\/p>\n

New Range Mode in DHTMLX Calendar<\/h5>\n

Besides the ability to link two calendars for showing a date range on them, v6.2 allows displaying a range of dates on one calendar only. This mode is easily enabled via the range:true<\/strong> option<\/a> in the calendar configuration object, where you should also define the start and end dates of your range:<\/p>\n

var<\/span> calendar =<\/span> new<\/span> dhx.Calendar<\/span>(<\/span>"calendar"<\/span>,<\/span> {<\/span>
\n    css:<\/span> "dhx_widget--bordered"<\/span>,<\/span>
\n    range:<\/span> true<\/span>,<\/span>
\n    value:<\/span> [<\/span>"03\/06\/19"<\/span>,<\/span> "15\/06\/19"<\/span>]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Enlarged API in Form and Layout<\/h5>\n

Now working with Form and Layout components is much more straightforward and intuitive, as v6.2 supplies them with a wide range of methods and events. <\/p>\n

From now on, developers are able to manipulate separate Form controls<\/a>: DatePicker, Checkbox, ColorPicker, Combo, Input, RadioGroup, Select, SimpleVault, Slider, Text, Textarea, TimePicker – and update their configuration on the fly. Check Form API ><\/a><\/p>\n

Moreover, new Layout events<\/a> provide more control over the components’ behavior in order to assemble complex user interfaces, especially with custom content in them. <\/p>\n

DHTMLX Guides for CSS Classes and Icons<\/h5>\n

Apart from the new functionality, our dev team designed special guides, which would assist you in the development of web apps using our UI library:<\/p>\n

\"DHTMLX
\nCheck the sample ><\/a><\/p>\n

Export to CSV<\/h6>\n

In addition to Excel, now Grid supports exporting of its data into the CSV format. You can choose to export data to a CSV file or just as a string. Read more in the documentation ><\/a><\/p>\n

In v6.2 DHTMLX TreeGrid also receives all the new features and improvements described above. For all the details, study the documentation<\/a>.<\/p>\n

\"ResizingCheck the sample ><\/a>
\nMeanwhile, developers can disable the resizing of specific columns by setting the resizable:false<\/strong> property in their config:<\/p>\n

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

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