Paging is gone when we attached Grid to a Layout

Suite and Optimus Suite 5
#1

Hi,

When we try to attached the GRID to a layout, the Paging part is gone. Hope you can give us information on how to make the paging visible.

var layout = new dhtmlXLayoutObject("grid", "1C");
    var grid   = layout.cells("a").attachGrid();
    
    grid.setImagePath("js/dhtmlxGrid/codebase/imgs/");
    grid.setHeader("No,Pathway Title,Datasource,Links");
    grid.setInitWidthsP("5,60,20,15");
    grid.setColTypes("cntr,ro,ro,ro");
    grid.enablePaging(true,20,10,"paging");
    grid.setPagingSkin("toolbar", "dhx_blue");
    grid.setSkin("dhx_blue");
    grid.enableMultiline(true);
    grid.enableAutoHeight(true);
    grid.enableAutoWidth(true);
    
    grid.init();
    
    grid.loadXML("search.do?ResultTab=Pathway");

    var dp = new dataProcessor("");
    dp.init(grid);

Thanks,
Joseph

#2

Please check tutorial (or more information) here: http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:paging#attaching_grid_with_paging_to_other_components

#3

Thanks for the link, anyways, we made to make the menu and paging visible using a layout…

Here is the code: You will notice we put the paging is in layout.cells(“b”) and menu in layout.cells(“a”).

The problem is that there are extra space in the cells a & b, can you give us information how we can override the minimum height for layout.

We also attached the screen shot for reference.

Thanks

function init() {

	var layout = new dhtmlXLayoutObject(document.body, "3E");

    layout.cells("a").hideHeader(); layout.cells("b").hideHeader(); layout.cells("c").hideHeader();
    layout.cells("a").setHeight(10); layout.cells("b").setHeight(10);
    layout.cells("a").fixSize(true, true); layout.cells("b").fixSize(true, true);

    var menu = layout.cells("a").attachMenu();
    menu.setSkin("dhx_blue");
    menu.setIconsPath("js/dhtmlxIcons/");
    menu.loadXML("/xml/pathway/search/SearchFormMenu.xml");
    menu.attachEvent("onClick", parent.onClickSearchFormMenu);

    var grid = layout.cells("c").attachGrid();
    grid.setImagePath("js/dhtmlxGrid/codebase/imgs/");
    grid.setHeader("No,Pathway Title,Datasource,Links");
    grid.setInitWidthsP("5,60,20,15");
    grid.setColTypes("cntr,ro,ro,ro");
    grid.enablePaging(true,20,10, layout.cells("b"));
    grid.setPagingSkin("toolbar", "dhx_blue");
    grid.setSkin("dhx_blue");
    grid.init();

    grid.loadXML("search.do?ResultTab=Pathway&<%= request.getQueryString() %>" , function() {

        parent.setSearchFilter();

    });

    var dp = new dataProcessor("");
    dp.init(grid);

    
}

dhtmlxError.catchError("LoadXML", parent.errorHandler);
layout3E.JPG922×270 41.4 KB

#4

Hi,

Please provide information as to how to reduce the grids pagination height when attached to separate layout than that of the grid. As you see in the figure above there are 3 layout first one has the toolbar. 2nd attached with pagination for grid. 3rd layout has grid attached.

Actually the layout borders on both ends + the default minimum space that layout adds gets added up to pagination and looks huge ( stretched height wise). I wan to reduce the height.

Thank you,

#5

To fix this issue do the following:

  1. attach Menu to the hole layout, not to the layout cell:
    var menu = layout.attachMenu();
  2. make menu type “2E”:
    layout = new dhtmlXLayoutObject(document.body, “2E”,“dhx_blue”);
  3. attach html string to first layout cell:
    layout.cells(“a”).hideHeader();
    layout._minHeight=“30”
    layout.cells(“a”).setHeight(30);
    layout.cells(“a”).attachHTMLString("
    ");
  4. attach grid paging to ‘pagingbar’ container:
    grid.enablePaging(true,20,10, “pagingbar”);