DHTMLX Docs & Samples Explorer

Grid in split mode

Using split mode allows you to have grid separated into two parts with independent horizontal scrolling.

Sales
Book Title
Sales
Book Title
Author
Price
In Store
Shipping
Bestseller
Date of Publication

Select row
Add row
Delete selected row
Serialize
Clear all
Load XML
Cells : setValue for selected row, column index:
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>
<script  src="../../codebase/ext/dhtmlxgrid_splt.js"></script>
 
 
<div id="gridbox" style="width:600px;height:150px;background-color:white;"></div>
<br />
<div><a href="#" onClick="mygrid.selectRow(this.nextSibling.value)">Select row</a><input id="" type="text" value="2"/></div>
<div><a href="javascript:void(0)" onClick="mygrid.addRow((new Date()).valueOf(), ['new','new','new'], 2)">Add row</a></div>
<div><a href="#" onClick="mygrid.deleteRow(mygrid.getSelectedId())">Delete selected row</a></div>
<div><a href="#" onClick="doSerialize()">Serialize</a></div>
<div><a href="#" onClick="mygrid.clearAll();">Clear all</a></div>
<div><a href="#" onClick="mygrid.loadXML('../common/grid.xml')">Load XML</a></div>
<div><a href="#" onClick="mygrid.cells(mygrid.getSelectedId(),this.nextSibling.value).setValue('new value');">Cells : setValue for selected row, column index:</a><input id="" type="text" value="1"/></div>
<script>
function doSerialize() {
    mygrid.setSerializationLevel(false, false, false);
    document.getElementById("alfa1").innerHTML = mygrid.serialize().replace(/\</g, "&lt;").replace(/\>/g, "&gt;").replace(/\&lt;row/g, "<br/>&lt;row");
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
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,co,ra,ro");
mygrid.getCombo(5).put(2, 2);
mygrid.setColSorting("int,str,str,int,str,str,str,date");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.splitAt(2);
mygrid.loadXML("../common/grid.xml");
</script> <div id="alfa1"></div>