There are several simple ways of loading data into dhtmlxTreeGrid:
First, you need to prepare a data set that will be loaded into TreeGrid.
dhtmlxTreeGrid 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,
"parent": 0,
"a": 2,
"b": "Edenburg",
"c": "Agnes",
"d": "Gem Street"
},
// more columns
];
Each object in the data set contains configuration of a grid row. The structure of a row is rather flexible. It may include:
You can specify data you want to add into TreeGrid on the initialization stage. Make use of the data configuration property, as in:
var treegrid = new dhx.TreeGrid("treegrid_container", {
columns: [// columns config],
data: dataset
});
To load data from an external file, make use of the load method of Tree Collection. It takes the URL of the file with data as a parameter:
var treegrid = new dhx.TreeGrid("treegrid_container", {
treegrid.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:
treegrid.data.load("/some/data").then(function(){
// some logic here
});
To load data from a local data source, use the parse method of Tree Collection. Pass a predefined data set as a parameter of this method:
var treegrid = new dhx.TreeGrid("treegrid_container", {
treegrid.data.parse(dataset);
To save the current state of a treegrid, use the serialize method of Data Collection. It converts the data of a treegrid into an array of JSON objects. Each JSON object contains the configuration of a separate row.
var state = treegrid1.data.serialize();
Then you can parse the data stored in the saved state array to a different treegrid. For example:
// creating a new treegrid
var treegrid2 = new dhx.TreeGrid(document.body);
// parsing the state of treegrid1 into treegrid2
treegrid2.data.parse(state);
Back to top