Step 2. Add a Grid on the Page

Our next step is to create a grid on the page. Actually, it requires a little effort.

To create a grid, we'll need:

To create a div container on the page.
To create a dhtmlxGrid object and place it to the div container.
To configure the dhtmlxGrid object.
To render the dhtmlxGrid object.

To create a grid on the page:

Place a div container on the page and set its width and height parameters in the style attribute:

"index.html" file

<html>
    <head>
        <title>Basic Grid</title>
        <link rel="stylesheet" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px;height:250px;"></div>     </body>
</html>

Initialize dhtmlxGrid using the dhtmlXGridObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

"index.html" file

<html>
    <head>
        <title>Basic Grid</title>
        <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px;height:250px;"></div>         <script type="text/javascript">            dhtmlxEvent(window,"load",function(){                 mygrid = new dhtmlXGridObject("mygrid_container");            });
        </script>
  </body>
</html>

The constructor takes 1 parameter: an HTML container where the grid will be reside.

Call the setImagesPath method to set the path to the folder with the source images of the grid:

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); //make sure you use ”/” at the end. });

Call the setHeader() method to set the headers of the grid's columns:

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); });

Call the setInitWidths() method to set the width of the grid's columns in pixels:

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); 
    mygrid.setInitWidths("*,150,150"); //col with '*' fills the remaining space});

Call the setColAlign() method to set the horizontal alignment of the columns:

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); 
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");//use right align for numeric values});

Call the setSkin() method to apply a skin to the grid.

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); 
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light"); //applies the 'light' skin});

See a list of predefined skins here

Call the init() method to finish initialization and render the grid on the page:

"index.html" file

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