{"id":6501,"date":"2019-08-15T12:02:49","date_gmt":"2019-08-15T09:02:49","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6501"},"modified":"2023-05-03T14:24:54","modified_gmt":"2023-05-03T11:24:54","slug":"dhtmlxsuite-6-1-minor-update-multiselection-enhanced-drag-n-drop-editing-features","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxsuite-6-1-minor-update-multiselection-enhanced-drag-n-drop-editing-features\/","title":{"rendered":"dhtmlxSuite 6.1 Minor Update: Multiselection, Enhanced Drag-n-Drop and Editing Features"},"content":{"rendered":"

It’s been a month and a half since the large-scale update of the whole JavaScript widget library<\/a> DHTMLX Suite v6.0. We’ve been gathering your feedback, prioritizing features for future releases, and working hard to deliver the next update 6.1. And now our minor release brings out editing for dhtmlxGrid and dhtmlxTree, multiselection and drag-n-drop of multiple items and inline editing in dhtmlxList and dhtmlxDataView as well as a range of other essential features for building top-notch user interfaces.<\/p>\n

dhtmlxGrid New Features and Updates<\/h5>\n
Data Editing<\/h6>\n

V6.1 provides new editing capabilities for our JavaScript Data Grid<\/a>. Now end users can easily edit any cells they need on the fly. When they double click a cell, an appropriate editor appears: a simple input field, selection box or datepicker:
\n\"DHTMLXCheck the sample ><\/a><\/p>\n

As you can also see from the recording above, there appeared a new column type – date<\/strong>, which enables end users to choose a date on a calendar in the column “Start date”. <\/p>\n

In order to achieve that and make an entire Grid editable, developers need to specify the editing:true<\/strong> property in the Grid configuration:<\/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> data,<\/span>
\n   editing:<\/span> true<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

However, you can limit a choice of columns that can be edited by end users if you set the editing:true<\/strong> property in the configuration of specific columns. For instance, here is how we can make only the first column editable:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span>
\n           width:<\/span>150<\/span>,<\/span>id:<\/span>"project"<\/span>,<\/span>
\n
\n          editing:<\/span>true<\/span>,<\/span>
\n          header:<\/span> [<\/span>
\n            {<\/span>text:<\/span>"Project"<\/span>}<\/span>,<\/span> {<\/span>content:<\/span>"selectFilter"<\/span>}<\/span>
\n           ]<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span> width:<\/span>150<\/span>,<\/span> id:<\/span>"owner"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span>text:<\/span>"Owner"<\/span>}<\/span>,<\/span>{<\/span>content:<\/span>"inputFilter"<\/span>}<\/span>]<\/span>}<\/span>,<\/span>
\n        {<\/span> width:<\/span>150<\/span>,<\/span> id:<\/span> "hours"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span>text:<\/span>"Hours"<\/span>}<\/span>,<\/span> {<\/span>content:<\/span>"inputFilter"<\/span>}<\/span>]<\/span>}<\/span>,<\/span>
\n        \/\/ more columns<\/span>
\n    ]<\/span>,<\/span>
\n    data:<\/span> data
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

By default, columns have an input<\/strong> type of the editor for working with plain text. If a column has a type “date”<\/strong>, then a datepicker editor will be used. Developers can also set a specific date format for editing:<\/p>\n

{<\/span>
\n    \/\/ if the type:"date" config is set in the column config, <\/span>
\n    \/\/ there's no need to specify the type of the editor<\/span>
\n    width:<\/span> 150<\/span>,<\/span> id:<\/span> "start_date"<\/span>,<\/span>
\n    header:<\/span> [<\/span>{<\/span> text:<\/span> "Calendar"<\/span>,<\/span> colspan:<\/span> 2<\/span> }<\/span>,<\/span> {<\/span> text:<\/span> "Start date"<\/span> }<\/span>]<\/span>,<\/span>
\n   type:<\/span> "date"<\/span>,<\/span> dateFormat:<\/span> "%d\/%m\/%Y"<\/span>
\n}<\/span><\/div><\/div>\n

In order to equip a cell with a selection box with options to choose from, you’ll need to specify the select<\/strong> editor type and and add the desired options for selection:<\/p>\n

{<\/span>
\n    width:<\/span> 150<\/span>,<\/span> id:<\/span> "status"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span>text:<\/span> "Status"<\/span>}<\/span>,<\/span> {<\/span>content:<\/span> "selectFilter"<\/span>}<\/span>]<\/span>,<\/span>
\n   editorType:<\/span> "select"<\/span>,<\/span> options:<\/span> [<\/span>"Done"<\/span>,<\/span> "In Progress"<\/span>,<\/span> "Not Started"<\/span>]<\/span>
\n}<\/span><\/div><\/div>\n

Additionally, now developers have a straightforward way to edit any Grid cell using the edit<\/strong> method. Here is how we can edit the first cell of the “project” column with just one line of code:<\/p>\n

grid.edit<\/span>(<\/span>grid.data<\/span>.getId<\/span>(<\/span>0<\/span>)<\/span>,<\/span>"project"<\/span>)<\/span>;<\/span><\/div><\/div>\n
Vertical Spans in Header<\/h6>\n

Besides, now our Grid allows creating not only horizontal but also vertical spans in the header:
\n\"VerticalCheck the sample ><\/a><\/p>\n

Empty Grid<\/h6>\n

On top of all, v6.1 makes it possible to initialize an empty Grid, without any data loaded into it. It also introduces the ability to automatically add an empty row into the end of the Grid when the last empty row is filled out with the help of the autoEmptyRow<\/strong> property:<\/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   autoEmptyRow:<\/span>true<\/span>,<\/span>  
\n   data:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Complex Selection<\/h5>\n

V6.1 delivers the ability to highlight a selected cell together with a row it belongs to. Check the documentation ><\/a><\/p>\n

dhtmlxDataView and dhtmlxList New Features<\/h5>\n
Inline Editing<\/h6>\n

Besides dhtmlxGrid, our data processing components – DataView and List – also become easily editable starting from v6.1. There are two ways of setting up the editing functionality. The first one is via the API<\/a> with the help of the edit<\/strong> method. It allows developers to define which item should be edited. For example, the following line of code instructs DataView to enable editing of the item with the id “1”:<\/p>\n

dataview.edit<\/span>(<\/span>"1"<\/span>)<\/span>;<\/span><\/div><\/div>\n
var<\/span> dataview =<\/span> new<\/span> dhx.DataView<\/span>(<\/span>"dataview_container"<\/span>,<\/span> {<\/span>editing:<\/span>true<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n

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

The same edit<\/strong> method and editing<\/strong> configuration option can be applied in dhtmlxList. Read more in the documentation ><\/a><\/p>\n

As for dhtmlxTree, previously developers were able to use the edit<\/strong> method for changing particular items. Now they can turn on inline editing of all Tree items with the help of the editing<\/strong> configuration property<\/a> as well:<\/p>\n

var<\/span> tree =<\/span> new<\/span> dhx.Tree<\/span>(<\/span>"tree"<\/span>,<\/span> {<\/span>editing:<\/span> true<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Multiple Selection and Drag-n-Drop<\/h6>\n

V6.1 introduces a multiple selection of List and DataView items and multiple drag-n-drop. <\/p>\n

By default, it’s possible to select just one item in a DataView<\/a> or List<\/a> at a time. However, with the multiselection<\/strong> configuration option developers can enable the selection of multiple items at once:<\/p>\n

var<\/span> dataview =<\/span> new<\/span> dhx.DataView<\/span>(<\/span>"dataview"<\/span>,<\/span> {<\/span>multiselection:<\/span>true<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n
var<\/span> list =<\/span> new<\/span> dhx.List<\/span>(<\/span>"list"<\/span>,<\/span> {<\/span>multiselection:<\/span>true<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Multiselection has two modes of work. The default one makes use of “Ctrl + click” combination for selecting several items. But developers may switch on a simple click mode, which allows selecting multiple items by means of clicks only:<\/p>\n

var<\/span> dataview =<\/span> new<\/span> dhx.DataView<\/span>(<\/span>"dataview"<\/span>,<\/span> {<\/span>
\n    multiselection:<\/span>true<\/span>,<\/span>
\n    multiselectionMode:<\/span>"click"<\/span>  
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Drag-n-drop of multiple items can be easily enabled by specifying the multiselection:true<\/strong> configuration property in addition to the dragMode<\/strong>. For example, let’s set up the drag-n-drop of multiple items in the DataView:<\/p>\n

var<\/span> dataview =<\/span> new<\/span> dhx.DataView<\/span>(<\/span>"dataview_container"<\/span>,<\/span> {<\/span>
\n    dragMode:<\/span>"source"<\/span>,<\/span>
\n    multiselection:<\/span>true<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Other Updates<\/h5>\n

In addition to the main features presented above, we’ve updated a range of other UI components included in dhtmlxSuite: ComboBox, Form, Popup, Window – as well as Data and Tree Collection. For instance, dhtmlxCombo received the ability to hide and show a popup via the Popup API. dhtmlxWindow got a special method for checking the window’s visibility – isVisible<\/strong>. Learn about all the updates of JavaScript UI components in the documentation<\/a>.<\/p>\n

We invite you to try out dhtmlxSuite 6.1 during a 30-day evaluation period<\/a> and benefit from the assistance of our technical support team.<\/p>\n

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

We’ll be looking forward to your feedback! Stay tuned for future updates!<\/p>\n

Related Materials:<\/h5>\n

\"Drag-n-dropCheck the sample ><\/a><\/p>\n

However, there is a more convenient way, which gives end users an opportunity to edit all items at once. It can be enabled using the editing<\/strong> configuration option<\/a> before the initialization of the component:<\/p>\n

Check the documentation ><\/a>
\n\"EmptyCheck the sample ><\/a><\/p>\n

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

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

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