Step 3. Load Data to the Grid

Now it's time to load data to the grid.

dhtmlxGrid can take data of 4 formats: XML (default), JSON, JSArray, CSV. And in this article we'll describe loading data of the default format, i.e. XML.

XML format that is used for grid's data is intuitively clear. Generally, it consists of the rows with cells, containing some basic data. Each row should have a unique identifier (it's important for the grid's ability to distinguish one row from another).

For our sample we will create a structure with rows that have 3 cells inside (as soon as we set 3 columns in the grid) and save it in a separate file.

To load data to the grid:

Create an XML file in the "basic_grid " folder and name it "data.xml ".

Open the "data.xml " file and add the following code into it:

"data.xml" file

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <row id="a">
        <cell>book 1</cell>   //1st column
        <cell>300</cell>      //2nd column
        <cell>50</cell>       //3rd column
    </row>
    <row id="b">
        <cell>book 2</cell>
        <cell>2147</cell>
        <cell>43</cell>
    </row>
    <row id="c">
        <cell>book 3</cell>
        <cell>7488</cell>
        <cell>100</cell>
    </row>
</rows>

Call the load() method to load data from the "data.xml " file to the grid:

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); 
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light");
    mygrid.init();
    mygrid.load("data.xml");});