Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by sandip on Mar 28, 2009 07:04
open dhtmlx forum
paging issue with horizontal scrool bar

We are using dhtmlxGrid 2.0. There is major issue with the paging if we want to display the both paging and grid in same layout cell. I am sending u a sample code. What can I do to show the horizotal tool bar. I need to show paging and grid in the same cell.


What changes need to be done...
Path to keep the html ../dhtmlxLayout/samples/conf/
===============================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Layout Views</title>
    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/dhtmlxWindows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
    <script src="../../../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
    
    
    <link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
    <link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/excells/dhtmlxgrid_calc.css">
    <link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn_bricks.css">
    <script src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_deprecated.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_form.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_extra.js "></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_access.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_start.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_excel.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js"></script>
    <script src="../../../dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_link.js"></script>
    <script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
    <script src="../../../dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_calendar.js"></script>
    <script src="../../../dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_passw.js"></script>
    <script src="../../../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
    
    <script src="../../../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
    
    <script src="../../../dhtmlxToolbar/sources/dhtmlxtoolbar.js"></script>
    <script src="../../../dhtmlxToolbar/codebase/dhtmlxcommon.js"></script>
</head>
<body>
<div id="parentId" style="position: relative; top: 20px; left: 20px; width: 700px; height: 300px;"></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>
<style>
    .toolbarTable{

        background-color:#EDEDED;

}

</style>


<script>
    var layout = "2E";
    var dhxLayout = new dhtmlXLayoutObject("parentId", layout);
    dhxLayout.items[0].hideHeader();
    dhxLayout.items[1].hideHeader();
    dhxLayout.items[0].setHeight(55);
    dhxLayout.items[0].fixSize(true, true);
    
    dhxLayout.cells("b").attachObject( 'gridbox1');

    var dhxGrid =     new dhtmlXGridObject( 'gridbox' );
    
    dhxGrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    dhxGrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
dhxGrid.setInitWidths("50,150,120,80,80,80,80,200")
dhxGrid.setColAlign("right,left,left,right,center,left,center,center")
dhxGrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");
dhxGrid.setColSorting("int,str,str,int,str,str,str,date")
dhxGrid.getCombo(5).put(2,2);

    dhxGrid.setSkin("light");
    dhxGrid.enableTooltips("1,1");
    dhxGrid.init();
    dhxGrid.enablePaging(true,7,3,'recinfoArea');

    dhxGrid.setPagingSkin("toolbar")
    dhxGrid.loadXML("../../../dhtmlxGrid/samples/cell_types/grid.xml");
    
</script>

</body>
</html>
Answer posted by Alex (support) on Mar 30, 2009 07:31

The approach, that you provided, is correct.

Also you can try to use the same approach as recommended in the following post:

http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=8623