DHTML JavaScript Grid samples

Initialize object on page

You can place this JavaScript grid anywhere on your web page, attaching the grid to any object.
Set up grid parameters to determine the look of the grid. Specify whether the grid items will be loaded dynamically from XML. dhtmlxGrid uses AJAX for fast and flexible data loading.


<div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div> <script> mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("../imgs/"); mygrid.setHeader("Column A, Column B"); mygrid.setInitWidths("100,250") mygrid.setColAlign("right,left") mygrid.setColTypes("ro,ed"); mygrid.setColSorting("int,str") mygrid.init(); mygrid.loadXML("../grid.xml"); </script> Parameters passed to the constructor are:
  • object to attach grid to (should be loaded before calling constructor)

  • Specify additional parameters of the grid:
  • imgURL - specifies the path to the folder with grid images
  • setHeader("Column A, Column B") - set column header labels
  • setInitWidths("100,150") - set column width in pixels
  • setColTypes("ro,ed") - set column types (with editor codes. See documentation for details)
  • setColAlign("right,left") - set column text align
  • setColSorting("int,str") - set column sorting type
  • loadXML("grid.xml") - load grid data from XML

  • Go to the dhtmlxGrid main page or Close this page