Check documentation for the latest version of dhtmlxSuite Step 3. Add a Grid DHTMLX Docs

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
    <row id="1">
        <cell>Sipho Garz</cell> 

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.

To add a grid to the layout's cell:
  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

  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


Back to top