Step 3. Add a Grid

Let's move on and add a grid to the right lower cell of the layout and load data into it. Data source for the grid will contain reports for profits and losses for the last N years and will be specified in the XML format.

Data items of the source will have 5 properties:

• Year
• Quarter
• Profits per quarter, $
• Losses per quarter, $
• Person provided the data

<rows>
    <row id="1">
        <cell>2002</cell> 
        <cell>I</cell> 
        <cell>270538</cell> 
        <cell>170832</cell> 
        <cell>Sipho Garz</cell> 
    </row>
    ...
</rows>

As a result, our grid will contain 5 columns, each of which will correspond to an individual data property.
We will use the dhtmlxGrid component to present data in a tabular form on the page.

1. Call the attachGrid() method to attach a grid to the right bottom cell of the layout:
   
   

   "index.html" file

   var layout = new dhtmlXLayoutObject(document.body,"3L"); 
   var grid = layout.cells("c").attachGrid();;

2. Add the code below to "index.html" to configure the grid:
   
   

   "index.html" file

   grid.setImagePath("codebase/imgs/");       //sets the path to the source images
   grid.setHeader("Year,Quarter,Profits per quarter ($),Losses per quarter ($),"+
    "A person responsible for the data");              //sets the columns' headers
   grid.setColTypes("ro,ro,ro,ro,ro");                 //sets the types of columns
   grid.setInitWidths("100,150,230,230,*");   //sets the initial widths of columns
   grid.setColAlign("center,center,center,center,center");  //sets the x alignment

3. Call the init method to initialize the grid:
   
   

   "index.html" file

   grid.init();

4. Copy the "dynamic_chart/data/gridData.xml " file from the demo app to the "data " folder.
   As the data file is rather big we just get it from the demo app.
5. Call the load method, to load data to the grid:
   
   

   "index.html" file

   grid.init();
   grid.load("data/gridData.xml");

Back to top