dhtmlxgrid:first_steps [DHX documentation]

- Initialization of dhtmlxGrid
  - Java Script Initialization
  - Setting Image/Icon Path

Initialization of dhtmlxGrid

The first things that need to be done for any type of dhtmlxGrid's initialization are the following:

Download the dhtmlxGrid package from the server and place it in a folder;
Create an HTML file;
Place the full paths to dhtmlxGrid's CSS and JS files into the header of the created HTML file.

    <link rel="STYLESHEET" type="text/css" href="[full path to this file]/dhtmlxgrid.css">
    <script src="[full path to this file]/dhtmlxcommon.js"></script>
    <script src="[full path to this file]/dhtmlxgrid.js"></script>
    <script src="[full path to this file]/dhtmlxgridcell.js"></script>

Java Script Initialization

You need to create an HTML container where dhtmlxGrid will be placed. In this example, the container is a <div> element on page that is placed in the <body> tag:

    <div id="gridbox" style="width:600px;height:200px"></div>

The next step is to create a new dhtmlXGridObject and define main parameters needed for grid to look and behave as you need (the sample below doesn't show all possibilities. it just demonstrates commonly used methods):

        mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("./codebase/imgs/");//path to images required by grid
	mygrid.setHeader("Column A, Column B");//set column names
	mygrid.setInitWidths("100,250");//set column width in px
	mygrid.setColAlign("right,left");//set column values align
	mygrid.setColTypes("ro,ed");//set column types
	mygrid.setColSorting("int,str");//set sorting
	mygrid.init();//initialize grid
	mygrid.setSkin("dhx_skyblue");//set grid skin
	mygrid.loadXML("../common/grid.xml");//load data

The parameter passed to the constructor is the object to attach the grid to (should be loaded before the constructor is called). If none is used, then the user can apply attachToObject method to attach grid to some parent (object in DOM) in the following way:

        mygrid.attachToObject(obj); // obj - object the grid will be attached to

Since v.2.5 we added the possibility to *use object notation for initialization of dhtmlx components*. See Object constructor chapter for details.

Setting Image/Icon Path

Full path to grid's internal images (sort direction, any images used in editors, checkboxes, radiobuttons) can be set in dhtmlxGrid with the help of method setImagePath():

        grid.setImagePath(url); // url - full path to img directory with closing "/"

The above mentioned method should be used after creation of new dhtmlXGridObject, but before any of data loading methods.