Configuration

Arrow keys navigation

Related sample: Dataview. Arrow navigation

The DataView component lets you navigate its items with arrow keys. Enable this behavior with the keyNavigation property:

const dataview = new dhx.DataView("dataview_container", {
    itemsInRow: 4, keyNavigation: true
});

The option takes either true or false to turn navigation on and off, or a function that defines custom navigation logic.

Default shortcut keys

ArrowUp	moves focus to the item above
ArrowDown	moves focus to the item below
ArrowLeft	moves focus to the item on the left
ArrowRight	moves focus to the item on the right
Enter/Shift+Enter/Ctrl+Enter	selects the focused item
Enter	selects the focused item and opens the editor for it (when the "editable" property is enabled)
Ctrl+A	selects all items at once (when the "multiselection" property is enabled)

Drag-n-drop of items

DHTMLX DataView supports drag-n-drop of items between dataviews in three modes. Specify the dragMode property in the DataView configuration object and choose the mode you need:

• target — a dataview takes items from other dataviews, but its items cannot be dragged out
• source — a dataview lets you drag its items out, but cannot take items from other dataviews
• both — a dataview takes items from other dataviews and lets you drag its items out

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

To drag several items between dataviews, enable the multiselection property in addition to dragMode:

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

For details, see Multiple selection of items.

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 dataview configuration object.

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

Related sample: Dataview. Drag-n-drop copy

Editing items

Related sample: Dataview. Inline editing

You can make DataView items editable with the editable configuration option:

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

Height of an item

Related sample: Dataview. Setup Dataview item height

Set the height of a DataView item before initialization with the itemHeight property, either as a number:

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

You can also set it as a string value:

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

note

You cannot use the CSS calc() function in the itemHeight property.

Height of the DataView

Related sample: Dataview. Setup Dataview height

You can set the height of a DataView with the height configuration option:

const dataview = new dhx.DataView("dataview_container", {height: 150});

You can also use a string value to set the DataView height:

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

note

You cannot use the CSS calc() function in the height property.

Margins around DataView items

Related sample: Dataview. Configure gap size

You can add margins around DataView items to increase the distance between two items and between an item and the DataView borders. Use the gap configuration property to set the margin:

const dataview = new dhx.DataView("dataview_container", {itemsInRow: 4, gap: 20});

Multiple selection of items

The default DataView configuration allows only one selected item: selecting another item resets the previous selection. To select several DataView items, use the multiselection configuration option:

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

Set the multiselection property to true to select multiple items with the Ctrl key. To select several items with Ctrl+click, set the multiselection configuration option to "ctrlClick":

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

Related sample: Dataview. Multiselection

Number of items in a row

Related sample: Dataview. Amount items in a row

You can define the number of items in a DataView row with the itemsInRow configuration property:

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

Selection of items

The default DataView configuration highlights a selected item. To disable selection, set the selection configuration property to false:

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

Template for DataView items

Related sample: Dataview. With template

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

• item — (object) a data item

const dataview = new dhx.DataView("dataview_container", {
    itemsInRow: 4, 
    template: function(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;
    }
});

Event handlers for the template

From v7.0, you can assign event handlers to the HTML elements in a custom template for DataView items. Use 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;
}

const dataview = new dhx.DataView("dataview_container", {
    template: template,
    eventHandlers: {
        onclick: {
            item_wrap: function(event, id) {
                console.log("You clicked on " + event.target.tagName);
            },
        },
        onmouseover: {
            item_wrap: function(event, id) {
                console.log(dataview.data.getItem(id).short);
            },
        }
    }
});

Related sample: Dataview. Handling events in template