Check documentation for the latest version 6.0 of dhtmlxSuite Step 2. Add a Grid on the Page DHTMLX Docs

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:
  1. 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>
  2. 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>
  3. 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.
  4. 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();});

Back to top