Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by sandip on Mar 18, 2009 05:59
open dhtmlx forum
dhtmlxLayout cell contains grid with paging

dear sir,

can you please give me a sample code that would be using dhtmlxLayout(1C), and your following sample example should be shown in the 0th cells of that dhtmlxLayout
dhtmlxGrid/samples/loading_big_datasets/pro_paging_wt.html

Plz, guide me as soon as possible

thanx
sandip
Answer posted by Alex (support) on Mar 18, 2009 07:04

Hello,

You can use attachObject method to add a table with grid into layout cell. And then you apply the same approach as in dhtmlxGrid/samples/loading_big_datasets/pro_paging_wt.html:

<div id="layoutId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px;"></div>
<table id="parentId">
  <tr>
  <td>
  <div style="width:100%; height: 240px;" id="gridbox" style="background-color:white;overflow:hidden"></div>
  </td>
  </tr>
  <tr>
  <td id="recinfoArea" ></td>
  </tr>
 </table>

<script>

var dhxLayout = new dhtmlXLayoutObject("layoutId", "1C");

dhxLayout.cells("a").attachObject("parentId");
mygrid = new dhtmlXGridObject('gridbox');
...

mygrid.enablePaging(true,10,3,"recinfoArea");
mygrid.setPagingSkin("toolbar")
mygrid.init();
...



Answer posted on Mar 19, 2009 05:39
thanx, above solution is working fine. But here one problem arises. I am using small dataset( 11 records). I set to show only 5 records on a page  but the first page the whole records(11 records), 2nd page is showing correct 6-10, and third page is showing 1 record. I am sending some of the my sample codes.
------------------------------------------
<div id="parentId" style="position: relative; top: 20px; left: 20px;"></div>
<div id="gridbox1" >
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td id="recinfoArea"></td>
        </tr>
        <tr align="top">
            <td>
                <div id="gridbox" style="position: relative; top: 0px;" width="100%" height="100%"></div>
            </td>
        </tr>
    </table>
</div>

------------------------------------------
// enable paging
propertyView.prototype.enablePaging = function()
{
    document.getElementById("recinfoArea").style.display="";
    this.propertyViewGrid.enablePaging(true,10,3,"recinfoArea");
    this.propertyViewGrid.setPagingSkin("toolbar")
}

// disable paging
propertyView.prototype.disablePaging = function()
{
    document.getElementById("recinfoArea").style.display="none";
}
----------------------------------------------------------------------

// enable property grid
propertyView.prototype.enablePropertyGrid = function()
{
    document.getElementById("gridbox").style.display="";
}

// disable property grid
propertyView.prototype.disablePropertyGrid = function()
{
    document.getElementById("gridbox").style.display="none";
}
------------------------------------------------------------------

this.enablePaging();
            this.enablePropertyGrid();
           
            var szQuery = applicationViewObj.getQuery(entity);
            var szLocation =  location.protocol + "//" +location.host;
            var url = "/GridTransform.jsp?query="+szQuery ;
            var url1 = "/GridTransform.jsp?";
       
            this.propertyViewGrid.loadXML(szLocation+url);
            this.propertyViewGrid.setSerializationLevel(true,false,true,true,true,false);
            this.propertyViewGrid.enableSmartRendering(true);
--------------------------------------------------------------------------------------------------


Answer posted by sandip on Mar 19, 2009 05:42
sorry insted of 5, I mentioned to show 10 record on a page, so plz asume it as 5.

Answer posted by Alex (support) on Mar 19, 2009 07:44

Please, try to use 5 intead of 10 as the second parameter:

grid.enablePaging(true,5,3,"recinfoArea");