DHTMLX Docs & Samples Explorer

Smart Rendering with dynamic loading and buffering

To increase grid performance working with large amount of data you can enable Smart Rendering with dynamical loading of rows from server (already loaded rows remain on client side).

To do this you need to add the following javascript command:
yourGrid.enableSmartRendering(mode,totalRows,bufferSize);

- and make your server side output records based on incoming parameters:

  • posStart -the first row in portion
  • count - number of rows to return

  • and the total number of rows which is set by total_count attribute in the tag

    Loading portion of data

    * - in the current sample total number of rows is 2,000 ** - server response is showed down to inform you when new portion loaded

    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/dhtmlxgridcell.js"></script>
     
     
     
    <div style="height:20px">
        <div id="a_1" style="color:red;">Loading portion of data</div>
    </div>
    <div id="gridbox" style="width:600px; height:250px; background-color:white;overflow:hidden"></div>
     
    <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.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, 50);
    mygrid.loadXML("php/dynload_slow.php");
    </script>