Grid in split mode

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

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>