Skip to main content

Configuration

Arrow keys navigation#

Related sample: Dataview. Arrow 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: 4, 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.

Default shortcut keys#

ArrowUpto move focus to the previous vertical item
ArrowDownto move focus to the next vertical item
ArrowLeftto move focus to the previous horizontal item
ArrowRightto move focus to the next horizontal item
Enter/Shift+Enter/Ctrl+Enterto add selection to a DataView item in focus
Ctrl+Ato select all items at once (when the "multiselection" property is enabled)

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: Dataview. Drag'n'drop

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: Dataview. Drag'n'drop Copy

Editing items#

Related sample: Dataview. Editable Dataview

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

Height of an item#

Related sample: Dataview. Setup Dataview Item Height

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 numbervar dataview = new dhx.DataView("dataview", {     itemHeight:34 /*!*/});

or as a string value

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

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

Height of the Dataview#

Related sample: Dataview. Setup Dataview Height

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

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

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

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

Margins around DataView items#

Related sample: Dataview. Configure Gap Size

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: 4, gap: 20});

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: Dataview. Multiselection Dataview

Number of items in a row#

Related sample: Dataview. Amount 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});

Selection of items#

Related sample: Dataview. Disable selection

The default configuration of DataView provides you with the selection feature that allows highlighting a DataView item. To disable selection in a DataView you need to set the selection configuration property to false:

var dataview = new dhx.DataView("dataview", {    selection: false});

Template for DataView items#

Related sample: Dataview. Render Template

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: 4,     template: function(item) {        var template = "<div className='item_wrap'>";        template += "<img className='image' src=" + "../images/" + item.thumbnailName + " />";        template += "<h2 className='title'>" + item.value + "</h2>";        template += "<p className='description'>" + item.shortDescription + "</p>";        template += "</div>";        return template;    }});

Event handlers for the template#

Starting from v7.0, it is possible to assign event handlers to the HTML elements of a custom template of DataView items by using the eventHandlers configuration option:

function template(item) {    let template = "<div className='item_wrap'>";    template += "<img className='image' src=" + "../images/" + item.thumbnailName + " />";    template += "<h2 className='title'>" + item.value + "</h2>";    template += "<p className='description'>" + item.shortDescription + "</p>";    template += "</div>";    return template;}
var dataview = new dhx.DataView("dataview", {    template: template,    eventHandlers: { /*!*/        onclick: { /*!*/            item_wrap: function(event, id) { /*!*/                display("You clicked on " + event.target.tagName); /*!*/            }, /*!*/        }, /*!*/        onmouseover: { /*!*/            item_wrap: function(event, id) { /*!*/                display(dataview.data.getItem(id).short); /*!*/            }, /*!*/        } /*!*/    } /*!*/});

Related sample: Dataview. Handling events in template

The eventHandlers object includes a set of key:value pairs, where:

key the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover).
valuean object that contains a key:value pair, where key is the css class name that the handler will be applied to and value is a function that takes two parameters:
  • event - an event object
  • id - the id of a DataView item