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 lists 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"
});

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 List 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.

Back to top