DHTMLX Docs & Samples Explorer

Icons in header

You have possibility to set icon for any header cell in your grid by inserting setHeader method in the code.

Add row
Remove Selected Row

Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
 
<table width="600px">
  <tr>
        <td>
            <div id="gridbox" style="width:585px;height:270px;background-color:white;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onClick="mygrid.addRow((new Date()).valueOf(),[0,'','','',false,'na',false,''],mygrid.getRowIndex(mygrid.getSelectedId()))">Add row</a><br>
            <a href="javascript:void(0)" onClick="mygrid.deleteSelectedItem()">Remove Selected Row</a>
        </td>
    </tr>
</table>
<br>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,img:[../common/images/books.gif]Book Title,Author,img:[../common/images/book.gif]");
mygrid.setInitWidths("100,200,190,80");
mygrid.setColAlign("right,left,left,right");
mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
mygrid.getCombo(5).put(2, 2);
mygrid.setColSorting("int,str,str,int");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid.xml");
</script>