DHTMLX Docs & Samples Explorer

Smart rendering and split mode

You have the possibility to enable both smart rendering and split modes in grid.

Loading whole data (2,000 rows) at once
Select row with id=r212; mygrid.setSelectedRow("r212");
Select row with id=r512; mygrid.setSelectedRow("r512");
Select row with id=r786; mygrid.setSelectedRow("r786");
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/ext/dhtmlxgrid_srnd.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_splt.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>
 
 
 
 
<div style="height:20px;">
    <div id="a_1" style="color:red;">Loading whole data (2,000 rows) at once</div>
</div>
<div id="gridbox" style="width:600px; height:250px; background-color:white;overflow:hidden"></div>
<a href="javascript:void(0)" onclick='mygrid.setSelectedRow("r212");'>Select row with id=r212; mygrid.setSelectedRow("r212");</a><br/>
<a href="javascript:void(0)" onclick='mygrid.setSelectedRow("r512");'>Select row with id=r512; mygrid.setSelectedRow("r512");</a><br/>
<a href="javascript:void(0)" onclick='mygrid.setSelectedRow("r786");'>Select row with id=r786; mygrid.setSelectedRow("r786");</a><br/>
<script>
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("ed,ed,ed,price,ch,co,ro,ro");
mygrid.getCombo(5).put(2, 2);
mygrid.setColSorting("na,na,na,na,na,na,na,na");
 
mygrid.attachEvent("onXLS", function() {
    document.getElementById("a_1").style.display = "block";
});
mygrid.attachEvent("onXLE", function() {
    document.getElementById("a_1").style.display = "none";
});
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.enableSmartRendering(true);
mygrid.splitAt(2);
mygrid.loadXML("../common/smartrend.xml");
</script>