dhtmlxgrid:how_to_place_grid_on_page [Skin test wiki]

Step 2 - Place Grid on the Page

There are two ways to place grid on the page, but as the main goal of this article is to show you the simplicity of dhtmlx components' usage, I'll go the most common way. So I need to place DIV on my page and set ID attribute to some unique value. Also I'll specify the grid's width and height right in the style attribute of the DIV.

    <div id="mygrid_container" style="width:600px;height:150px;"></div>

Now I proceed to the main phase of the process - defining the grid parameters. So in the script block (remember? I left it empty right after external javascript files inclusions) I write the following:

    var mygrid;
    function doInitGrid(){
 
 
    }

doInitGrid function will contain grid initialization code (not so much code I would say):

create grid object based on DIV we placed on the page. Using constructor function dhtmlXGridObject ;
set grid images path. This is a path to the folder which contains all the necessary images for the grid to look nice. In most cases it is codebase/imgs/. It is important to use this last ”/” in the path. By the way, this path has no relation to the images which you will use when representing your data in grid;
define grid header with setHeader method;
define the width of columns in grid with setInitWidths (in pixels) or setInitWidthsP (in percents). Use * to make the column use all available space;
define a column's horizontal align. Numeric values is better to align right;
set grid skin with setSkin. I'll use the “light” skin from the list of predefined ones;
and finaly initialize grid with these settings using init method. We'll add some more parameters to grid later. But for now the content of doInitGrid function will be the following:

    mygrid = new dhtmlXGridObject('mygrid_container');
 
    mygrid.setImagePath("codebase/imgs/");
 
    mygrid.setHeader("Model,Qty,Price");
 
    mygrid.setInitWidths("*,150,150");
 
    mygrid.setColAlign("left,right,right");
 
    mygrid.setSkin("light");
 
    mygrid.init();

Now we need to run this function. It is important to run it after DIV element that we would use for grid iniialization was loaded. So I could place this function call in the script block right after the mentioned DIV, but I prefer to use onload event of the “body: element for this. So my “body” tag will look like this:

    <body onload="doInitGrid();">

If you run the page now it should look like this: