Grid attached to tabbar doesn't show scroll bars

Suite and Optimus Suite 5
#1

Hi,

I have attached a Grid to tabbar which inturn is attached to a layout.
The layout occupies 100% of width and height.

I have populated the grid with specific no of columns and rows. Though
it populates all of the rows and columns, it doesn’t show all the rows and
columns. There should have been a scroll bars activated both vertically
and horizontally whenever it exceeds the screen size.

I have called enableAutoWidth and enableAutoHeight on the grid but its of no use. I have also called enableAutoReSize on tabbar.

Can you please let me know why it doesn’t show the scrollbars and what needs
to be done to show them up?

Regards
Praveen

#2

Please check if you are using attachGrid() method to attach Grid to Tabbar. With this method grid will be attached correctly.

#3

Hi Olga,

I have used attachTabbar for attaching tabbar to layout and then used attachGrid to attach grid to tabbar. Everything seems to be working fine except for the scrollbars, which are not enabled when the Grid is populated with contents more than screen size.

Cheers
Praveen

#4

Can you please provide example of layour\tabbar\grid initialization?

#5

Hi Olga,

Please find the details in following html. Do let me know if there are any mistakes in the code.

html, body { width: 100%; height: 100%; margin: 0px; overflow: auto; } 
<!-- StyleSheets -->
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid/codebase/dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">


<!-- Grid scripts -->
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxgrid.js"></script>
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxgridcell.js"></script>


<!-- m_tabbar scripts -->
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxcontainer.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar_start.js"></script>


<!-- DHTMLX Layout scripts -->
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>

<script language="javascript">

    var m_searchLayout;
    var m_tabbar;
    var m_tabcount;

    function createTabControl()
    {
        m_tabbar = m_searchLayout.cells("a").attachTabbar();
        m_tabbar.setImagePath("../codebase/dhtmlxtabbar/codebase/imgs/");
        m_tabbar.setSkinColors("#FCFBFC", "#F4F3EE", "#FCFBFC");
        m_tabbar.enableAutoReSize(true);
        m_tabbar.enableTabCloseButton(true);
        m_tabbar.setStyle("winDflt");
        m_tabcount = 1;
    }

    function createNewSearchResults()
    {
        var tabName = "Tab" + m_tabcount.toString();
        var searchname = "search" + m_tabcount.toString();
        m_tabbar.addTab(tabName, searchname, "100%");
        var grid = m_tabbar.cells(tabName).attachGrid();
        grid.setImagePath("../codebase/dhtmlxGrid/codebase/imgs/");
        grid.setHeader("col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14, col15, col16, col17, col18, col19, col20,col21,col22");
        grid.setInitWidths("100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100");
        grid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
        grid.setColSorting("str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str");             
        grid.enableAutoHeight(true);
        grid.enableAutoWidth(true);
        grid.enableMultiselect(true);
        grid.init();

        for (var i = 50; i >= 0; i--)
        {
            grid.addRow(i, ['test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test']);
        };

        grid.setSkin("light");
        m_tabbar.setTabActive(tabName);
        m_tabbar.enableAutoSize(true, true);
    }

    function displaySearchResults()
    {
        createTabControl();
        createNewSearchResults();
    }

    function createLayout()
    {
        m_searchLayout = new dhtmlXLayoutObject("searchLayout", "1C", "dhx_blue");
		m_searchLayout.cells("a").hideHeader();
    }

    function onLoad()
    {
        createLayout();
        displaySearchResults();
    }

</script>
#6

This issue occurs because of Grid in auto width and auto height mods cannot modify width and height of the tabbar or other dhtmlx component.

You can try to use (*) as one of the grid’s column width:

grid.setInitWidths("100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,*");

In such case last column will occupy all available width of the grid container.

#7

The problem is still the same even if I use “*” as the last column width. I don’t know whether the approach of attaching tabbar to layout and then attaching grid to tabbar is correct or not.
Please let me know if you have any other remedies.

#8

I have observed some behavioural change if I use less no of rows. If I reduce the no of rows getting filled so that the screen doesn’t fill up vertically then the horizontal scrollbar gets enabled. If we have a case where we need both horizontal and vertical scrollbars then its not working.

#9

Please try to use following code of grid initialization:

[code]var grid = m_tabbar.cells(tabName).attachGrid();
grid.setImagePath("…/codebase/dhtmlxGrid/codebase/imgs/");
grid.setHeader(“col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14, col15, col16, col17, col18, col19, col20,col21,col22”);
grid.setInitWidths(“100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100”);
grid.setColTypes(“ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro”);
grid.setColSorting(“str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str”);

grid.enableMultiselect(true);
grid.init();[/code]

(We have just removed autowidth and autoheight)

#10

Your solution works fine if the browser is not resized. If I decrease the browser dimensions, I can see scrollbars for both grid and the browser which is not my intention.

Can we avoid these multiple scrollbars and make the grids scrollbar behave like the main scrollbar?

I just wanted to have a tab control with each tab showing a grid and their scrollbars acting based on size of the content.

Another problem I am facing is when I tried to close the active tab with grid. It gives a runtime error stating that “this.cells(…) is null or not an object”.

This error shows up on line 45 of dhmtxtabbar.js in _setSizes method line -
if (id)this.cells(id).activate();