Work with DataView

Setting focus on item

To set focus on a DataView item, make use of the setFocusIndex method. It takes the index of an item as a parameter:

dataview.setFocusIndex(7);

Using Data Collection API

You can manipulate DataView items with the help of the Data collection API.

Adding items into DataView

It is possible to add more items into the initialized DataView on the fly. Use the add() method of Data Collection. It takes two parameters:

  • config - (object) the configuration object of the added item
  • index - (number) optional, the position to add an item at
dataview.data.add({
    "value": "Learning new DHTMLX" + " " + (2019 + i),
    "thumbnailName": "61ot4vfL9HL.jpg",
    "shortDescription": "Create your first single-page JavaScript application",
    "isbn": "184969933X"
},0);

Updating DataView items

You can change config options of the item via the update() method of Data Collection. It takes two parameters:

  • id - the id of the item
  • config - an object with new configuration of the item

For example, you can change the value of an item:

dataview.data.update("item_id",{
    value:"Nice item"
});

Removing items from DataView

To remove an item, make use of the remove() method of Data Collection. Pass the id of the item that should be removed to the method:

dataview.data.remove("id");

Filtering DataView data

You can filter DataView data by the specified criteria with the help of the filter method of Data collection. Check all details on parameters of the method in the Data collection API.

dataview.data.filter({
    by:"value",
    match:2,
    compare:(value,match,item)=>{ return parseFloat(value) % 2 == 0}
});

Sorting DataView data

It is possible to sort data in DataView via the sort method of Data collection. Check all details on parameters of the method in the Data collection API.

dataview.data.sort({ 
    by:"value",
    dir:"desc"
});

Using Selection API

You can manipulate with DataView items via the API of the selection object. It is possible to select an item, remove selection, and get the id or even the object of a selected DataView item.

Selecting an item

To select a particular DataView item, make use of the add() method of the selection object. As a parameter the method takes the id of an item.

var id = dataview.selection.getId(); // -> "2"
dataview.selection.add("2");

Unselecting an item

To remove selection from a selected item, apply the remove() method of the selection object. The method may take the id of an item as a parameter:

dataview.selection.remove("2");

Getting id of a selected item

You can get the id of the currently selected item with the getId() method of the selection object:

var selected = dataview.selection.getId(); // -> "2"

Getting object of a selected item

It is also possible to get the object of a selected item using the getItem() method of the selection object:

var item = dataview.selection.getItem();
Back to top