Configuration

Height of an item

You can specify the necessary height of a Dataview item and set it before initialization of Dataview via the itemHeight property either as a number:

// sets the height of an item as a number
var dataview = new dhx.DataView("dataview", { 
    itemHeight:34 });

Related sample:  Setup dataview item height - DHTMLX Dataview

or as a string value

// sets the height of an item as a string value
var dataview = new dhx.DataView("dataview", { 
    itemHeight:"34px" });

The usage of the CSS calc() function within the itemHeight property is not possible.

Height of the Dataview

You can define the desired height of a dataview via the height configuration option as easy as that:

var dataview = new dhx.DataView("dataview", {height: 400});

Related sample:  Setup dataview height - DHTMLX Dataview

You can also use a string value for setting the height of Dataview:

var dataview = new dhx.DataView("dataview", {height: "400px"});

The usage of the CSS calc() function within the height property is not possible.

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

Related sample:  Amount items in a row - DHTMLX Dataview

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

Related sample:  Configure gap size - DHTMLX Dataview

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 multiselection property in addition to 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

Copying dragged item

Instead of moving a dragged item to a new position in the same or a different dataview, you can copy it. Use the dragCopy option in the configuration object of a dataview.

var source = new dhx.DataView("dataview-source", {dragMode: "source", dragCopy: true});
var target = new dhx.DataView("dataview-target", {dragMode: "target", dragCopy: true});

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. You need to set a function as its value and pass one parameter to it:

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

Related sample:  Render template - DHTMLX Dataview

Arrow keys navigation

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

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

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

Related sample:  Arrow navigation - DHTMLX Dataview

Editing items

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

var dataview = new dhx.DataView("dataview_container", {editable: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});

Setting the multiselection property to true presupposes selection of multiple items by using Ctrl key. It is also possible to use the "Ctrl+click" combination to select several items. For this, you need to set the multiselection configuration option to "ctrlClick":

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

Related sample:  Multiselection dataview - DHTMLX Dataview

Back to top