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
The user needs to create an HTML container where dhtmlxGrid will be placed later. In this example, the container is a <div> element on page that is placed in the <body> tag:
<div id="gridbox" style="width:200;height:200"></div>
The next step is to create a new dhtmlXGridObject and place it after the <div> element (container) that we've just created:
var grid = new dhtmlXGridObject("gridbox");
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:
grid.attachToObject(obj); // obj - object the grid will be attached to
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.