Skip to main content

Data Loading

There are several ways of loading DataView items:

  • from an external file
  • from a local data source

First, you need to prepare a data set that will be loaded into DataView.

Preparing data set#

dhtmlxDataView expects loaded data in the JSON format. Here is an example of an appropriate data set:

var dataset = [    {"value":"Learning DHTMLX Suite UI", "id":"1"},    {"value": "Unlocking Android", "id":"2"},    {"value": "Android in Action, Second Edition", "id":"3"},    {"value": "Zend Framework in Action", "id":"4"},]

Related sample: Dataview. Config Data

Each object in the data set contains a number of key:value pairs that represent attributes of DataView items. You can specify your own template of rendering DataView items with the help of the template configuration option.

External data loading#

To load data from an external file, make use of the load() method of DataCollection. It takes the URL of the file with data as a parameter:

var dataview = new dhx.DataView("dataview_container");"../common/dataset.json");

Related sample: Dataview. Basic Initialization

The component will make an AJAX call and expect the remote URL to provide valid JSON data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:"/some/data").then(function(){   // some logic here});

Loading from local source#

To load data from a local data source, use the parse() method of DataCollection. Pass a predefined data set as a parameter of this method:

var dataview = new dhx.DataView("dataview_container");;

Related sample: Dataview. Basic Initialization

Saving and restoring state#

To save the current state of a dataview, use the serialize() method of DataCollection. It converts the data of a dataview into an array of JSON objects. Each JSON object contains a set of key:value pairs that represent attributes of DataView items.

var state =;

Then you can parse the data stored in the saved state array to a different dataview. For example:

// creating a new dataviewvar dataview2 = new dhx.DataView(document.body);// parsing the state of dataview1 into;