Configuration

Number of items in a row

You can define the number of items that should be displayed in a row of DataView with the help of the itemsInRow configuration property:

var dataview = new dhx.DataView("dataview", {itemsInRow: 5});

Margins around DataView items

It is possible to add margins around DataView items to increase distance between two items as well as between an item and DataView borders. Use the gap configuration property to define the desired margin:

var dataview = new dhx.DataView("dataview", {itemsInRow: 5, gap: "20"});

Drag-n-drop of items

dhtmlxDataView supports drag-n-drop of items between dataviews in several modes. To begin with, you should specify the dragMode property in the configuration object of DataView. Then define which mode you need:

  • "target" - a dataview takes items from other dataviews, while its items can't be dragged out of it
  • "source" - a dataview allows dragging its items out and can't take items from other dataviews
  • "both" - a dataview both takes items from other dataviews and allows dragging its items out as well
var dataview = new dhx.DataView("dataview_container", { 
    dragMode:"source"
});

In order to provide the possiblity of dragging several items between dataviews, you should enable the Configuration in addition to the dragMode:

var dataview = new dhx.DataView("dataview_container", { 
    dragMode:"source",
    multiselection:true
});

Read more about multiselection in DataView below.

Related sample:  Drag'n'drop - DHTMLX Dataview

Template for DataView items

You can define a template for rendering items in a dataview with the help of the template configuration property. Set as its value a function that takes one parameter:

  • item - (object) an object of a data item
var dataview = new dhx.DataView("dataview", {itemsInRow: 5, template: function(item){
    return item.htmlContent + " <strong>this is template</strong>";
}});

Arrow keys navigation

The DataView component provides the possibility to navigate its items with arrow keys. You can enable this functionality using the arrowNavigation property:

var dataview = new dhx.DataView("dataview", {
    itemsInRow: 5, arrowNavigation: true
});

As a value of this option you use either true/false to switch it on/off, or you can specify a function that will define some custom navigation logic.

Editing items

You can enable the possibility to edit DataView items with the help of the editing configuration option:

var dataview = new dhx.DataView("dataview_container", {editing:true});

Related sample:  Editable Dataview - DHTMLX Dataview

Multiple selection of items

By default, you can select only one item in a dataview, since selection of another item resets selection of the previous one. To enable the possbility to select several DataView items, make use of the multiselection configuration option:

var dataview = new dhx.DataView("dataview", {multiselection:true});

Multiselection modes

The default functionality presupposes multiple selection of items in a dataview using the "Ctrl+click" combination. It is also possible to use simple clicks to select several items. For this, you need to enable the corresponding mode via the multiselectionMode configuration option:

var dataview = new dhx.DataView("dataview", {
    multiselection:true,
    multiselectionMode:"click"   
});

Related sample:  Multiselection Dataview - DHTMLX Dataview

Back to top