DHTML JavaScript Grid samples

Setting cells and column properties

Using eXcell technology (extended cells) you can define the formating for each column of the javascript grid and the editor to edit it.
For more details and the list of available cell types see "Column Types" and "Using eXcell" chapters of Documentation Guide.
During grid initialization you also can define:

  • column alignment - setColAlign
  • header labels - setHeader
  • sorting type - setColSorting
  • column initial width - setInitWidths
  •  

    <div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div> <script> mygrid = new dhtmlXGridObject('gridbox'); ... mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); mygrid.setInitWidths("50,150,120,80,80,80,80,200") mygrid.setColAlign("right,left,left,right,center,left,center,center") mygrid.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro"); mygrid.setColSorting("int,str,str,int,str,str,str,date") mygrid.setColumnColor("white,#d5f1ff,#d5f1ff") ... mygrid.init(); mygrid.loadXML("../grid.xml"); </script>

    Go to the dhtmlxGrid main page or Close this page