Step 2. Add a Grid on the Page

Our next step is to create a grid on the page. We will present a grid with 3 columns: Name, Quantity, Price.

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>dhtmlxGrid. Server side</title>
        <link rel="stylesheet" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px; height:160px;"></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>dhtmlxGrid. Server side</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:160px;"></div> 
        <script>            dhtmlxEvent(window,"load",function(){ 
                mygrid = new dhtmlXGridObject("mygrid_container");             });
        </script>
    </body>
</html>

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

"index.html" file

dhtmlxEvent(window,"load",function(){ 
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/"); //sets the path to the source images    mygrid.setHeader("Name,Quantity,Price");           //sets the header labels    mygrid.setInitWidths("*,150,150");     //sets the initial widths of columns    mygrid.setColAlign("left,right,right");     //sets the horizontal alignment    mygrid.setColTypes("ed,ed,price");              //sets the types of columns    mygrid.setSkin("dhx_skyblue");                     //sets the skin to apply});

To know more about initializing and configuring dhtmlxGrid, read the First Steps with dhtmlxGrid tutorial.

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.setImagePath("codebase/imgs/"); 
    mygrid.setHeader("Name,Quantity,Price"); 
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setColTypes("ed,ed,price"); 
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();});