Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by haritha on Sep 30, 2008 02:58
open dhtmlx forum
paging


Hi,

I am trying to implement paging by setting paging skin as toolbar. I accomplished it when i am loading the grid with xml but when i am loading the data with html as follows paging toolbar is not getting displayed.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>For demo purpose only :: &1</title>
    <link rel='STYLESHEET' type='text/css' href='codebase/dhtmlxgrid.css'>
    <link rel='STYLESHEET' type='text/css' href='codebase/ext/dhtmlxgrid.css'>
    <link rel='STYLESHEET' type='text/css' href='codebase/toolbar/dhtmlxtoolbar.css'>
    <link rel="STYLESHEET" type="text/css" href="codebase/ext/dhtmlxgrid_pgn_bricks.css">
    
    <script src='codebase/dhtmlxcommon.js'></script>
    <script src='codebase/dhtmlxgrid.js'></script>        
    <script src='codebase/ext/dhtmlxgrid_filter.js'></script>        
    <script src='codebase/dhtmlxgridcell.js'></script>    
    <script src='codebase/ext/dhtmlxgrid_start.js'></script>
    <script src='codebase/ext/dhtmlxgrid_splt.js'></script>
    <script src='codebase/ext/dhtmlxgrid_pgn.js'></script>
    <script src='codebase/excells/dhtmlxgrid_excell_acheck.js'></script>
    <script src='codebase/excells/dhtmlxgrid_excell_calendar.js'></script>    
    <script src='codebase/excells/dhtmlxgrid_excell_link.js'></script>
    <script src='codebase/toolbar/dhtmlxcommon.js'></script>
    <script src='codebase/toolbar/dhtmlxprotobar.js'></script>
    <script src='codebase/toolbar/dhtmlxtoolbar.js'></script>
    
    <script type="text/javascript" src='codebase/dhtmlxcommon.js'></script>
<script type="text/javascript" src='codebase/dhtmlxcombo.js'></script>
</head>

<body>


    <table name="myGrid" id="tblToGrid" onbeforeinit="doBeforeInit()" oninit="doAfterInit()" forceCellTypes="true"     style="width:200px" border="1" lightnavigation="true">
        <tr>
            <td type="ra">column1</td>
            <td >Column 2</td>
            <td type="acheck"> column3 </td>
            <td type="link"> column4 </td>
            <td type="calendar"> column4 </td>
            <td type=ch align="center"> master checkbox </td>            
        </tr>
        <tr>
            <td>value 12</td>
            <td>value 12</td>
            <td></td>
            <td><a onclick="link()">link</a></td>
            <td></td>        
            <td>check</td>        
        </tr>
        <tr>
            <td>value 12</td>
            <td>value 22</td>
            <td></td>
            <td><a onclick="link()">link</a></td>
            <td></td>
            <td>check</td>        
                    
        </tr>
        <tr>
            <td>value 12</td>
            <td>value 32</td>
            <td></td>
            <td><a onclick="link()">link</a></td>    
            <td></td>
            <td>check</td>        
                        
        </tr>
        
        
    </table>
<br>


<div id="recinfoArea" style="width:600px;"></div>
<script type="text/javascript" charset="utf-8">

    myGrid= new dhtmlXGridFromTable('tblToGrid');
    alert("start")
    //myGrid.registerCList(5,["Stephen King","John Grisham","Honore de Balzac"]);
    myGrid.setSkin('light');
    myGrid.setImagePath("codebase/imgs/");
//    myGrid.splitAt(2);
myGrid.enablePaging(true,3,2,"recinfoArea");    
    myGrid.setPagingSkin("toolbar");


        
function doBeforeInit(){
myGrid.setImagePath("codebase/imgs/");
myGrid.attachHeader(",#text_filter,,,,#master_checkbox");

    
    }

    function doAfterInit()
    {
     myGrid.setImagePath("codebase/imgs/");
     myGrid.forEachRow(function(id){
     if (myGrid.cells(id,0).getValue()==1)
{
myGrid.cells(id,0).setValue(0);
}
if (myGrid.cells(id,5).getValue()==1)
{
myGrid.cells(id,5).setValue(0);
}
});

}




function link()
{
    alert("in link"+myGrid.getSelectedId());
}

</script>


</body>
</html>


Can you please help me in this issue.

Thanks
haritha
Answer posted by Support on Sep 30, 2008 07:37
Add next line to finish paging initialization ( it not necessary in case of loading from external data source, but need, when data loaded from HTML ) 

myGrid.enablePaging(true,3,2,"recinfoArea");  
myGrid.setPagingSkin("toolbar");
myGrid.changePage(0); //will resolve problem