Skip to main content

Data Loading

There are several simple ways of loading data into dhtmlxGrid:

  • adding data via a configuration property
  • load data from an external file
  • load data from a local data source

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

Preparing data set#

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

var dataset = [    {        "id": 0,        "a": 1,        "b": "Linwood Long long long",        "c": "Petersen",        "d": "Dahlgreen Place"    },    {        "id": 1,        "a": 2,        "b": "Edenburg",        "c": "Agnes",        "d": "Gem Street"    },    // more columns];

Related sample: Grid. Large Dataset

Each object in the data set contains configuration of a grid row. The structure of a row is rather flexible. It may include:

id(string|number) optional, the id of a row. In case you haven't specified ids of rows, they will be auto-generated
columnContent(string|number) content of a column as key:value pairs, where key is the id of a column and value is any content you want to add into the column

Adding data on Grid initialization#

You can specify data you want to add into Grid on the initialization stage. Make use of the data configuration property, as in:

var grid = new dhx.Grid("grid_container", {    columns: [// columns config],    data: dataset});

Related sample: Grid. Basic Initialization

External data loading#

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

var grid = new dhx.Grid("grid_container");grid.data.load("../common/dataset.json");

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:

grid.data.load("/some/data").then(function(){   // some logic here});

Loading from local source#

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

var grid = new dhx.Grid("grid_container");grid.data.parse(dataset);

Related sample: Grid. External Data Loading

Saving and restoring state#

To save the current state of a grid, use the serialize() method of Data Collection. It converts the data of a grid into an array of JSON objects. Each JSON object contains the configuration of a separate row.

var state = grid1.data.serialize();

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

// creating a new gridvar grid2 = new dhx.Grid(document.body);// parsing the state of grid1 into grid2grid2.data.parse(state);

Dynamic loading#

Pro version only

This functionality requires PRO version of the dhtmlxGrid (or DHTMLX suite) package.

To enable dynamic data loading in Grid you need to:

new dhx.LazyDataProxy("https://docs.dhtmlx.com/suite/backend/lazyload", {    limit: 30,    prepare: 5,    delay: 150,    from: 0});
  • load data into Grid via the load() method of Data Collection and pass lazyDataProxy as a parameter of this method:
var grid = new dhx.Grid("grid_container");grid.data.load(lazyDataProxy);

Related sample: External data lazy load

note

The add, remove, copy, move, update, changeId, sort and filter methods of Data Collection will not work until all data are loaded into Grid.