Horizontal scrollbar not showing when it should

Hi, I'm currently evaluating this product.

I'm currently testing on a grid having one fixed row on both sides, contained in a fixed div.

I'm having the same problem as described in this topic:

http://www.activewidgets.com/javascript.forum.11341.3/v2-always-show-scrollbars.html

It's an old topic, but I don't think that this problem was ever fixed. When it loads, if the page is wide enough to display the data without using any horizontal scrollbar, no scrollbar will be displayed. However, if I resize the division (I resize it by changing its width when I detect the browser being resized), it won't ever show the scrollbar. Result, columns are missing.

However, if, when the data loads, the grid needs an horizontal scrollbar, everything works fine.

Tryed to refresh the grid after resizing my div, but it doesn't help.

Will it fixed? Or anyone got a workaround?

> I'm currently testing on a grid having one fixed row on both sides, contained in a fixed div.

I'm not sure I understand what you mean by one fixed row on both sides. Can you put up an example?

> Tryed to refresh the grid after resizing my div, but it doesn't help.

Have you tried setting a CSS style for just the grid (without a DIV) with a width set to a percentage?

> I'm not sure I understand what you mean by one fixed row on both sides. Can you put up an example?

I use this:

objGrid.setFixedLeft(1);
objGrid.setFixedRight(1);

But having fixed columns doesn't seem to be the problem. Even if I remove them, I have the same problem.

> Have you tried setting a CSS style for just the grid (without a DIV) with a width set to a percentage?

Just tryed. I removed my DIV, placed my grid directly in body (innerHTML) and added a CSSS style for the grid as you said:

objGrid.setStyle("width","100%");

I still face same problem.

Anyway, I'm now convinced that this is a general bug that have never been solved. I use firefox 3.5. If you run the demo on this page (which is something similar to what I have), you should get the same problem:

http://www.activewidgets.com/aw.ui.grid/fixed-model.html

There are too many columns on this example, so you need to reszie your browser (so it has 2 screen wide) then reload the demo again (initialy, horizontal scroll must not be visible). Then try resizing the browser, reducing its width. The scrollbar but will NEVER appear even if it should.

Might be easier to test with few less columns..

Ah, OK, an extended grid.

I'm checking it with FF2. Note that the AW version used for the examples is 2.0.

I edited the example code to show 15 columns rather than 20 and it appears with no horizontal scrollbar at first. Then resized the width and no horizontal scrollbar appeared. One thing I did notice was that the 2nd last column shrank (it was very wide to start with due to the width of the browser). So its clearly a bug.

Do you see this with 2.5.5? What about with a standard grid? (Sorry, I don't have time to check.)

Yes, 2.5.5, the last version.
I just tested with standard grid:

var objGrid = new AW.UI.Grid;

Same result. This isn't a huge bug, but it can be annoying. We plan to use this grid a lot in our application.

I tested a bit more.. and it seems like the grid, when its container (body or DIV) is resized (when no horizontal scrollbar was needed on first load), it calculates on the initial width to determine if a scrollbar is needed. So if you start resizing columns (after doing the steps to reproduce the problem), you won't see any horizontal scrollbar until you reach grid's initial width.

You can apply alex's fix
http://www.activewidgets.com/javascript.forum.21650.0/dynamic-height-on-a-data.html
But modified for width also :

obj.paint = function(){
var h = this.getScrollTemplate().element().offsetHeight;
var w = this.getScrollTemplate().element().offsetWidth;
this.setTimeout(function(){
this.setContentHeight(h, "total");
this.setContentWidth(w, "total");
this._virtualController.paint.call(this);
});
}

To column resize event "onColumnWidthChanged", and also to the browser resize with some timeout delay [ IE only needs a obj.refresh() ], but I am still investigating a way to do it on a container resize:
http://www.activewidgets.com/javascript.forum.25356.9/issue-with-onscrollwidthchanged-and-getscrollwithd.html
HTH

Thanks Carlos,

I know when my container resizes, that's something I have control on.

This fix seems to work. But I think this paint function should be built-in. Then it's easy to call the paint function manually when it's needed.

Here's full fix:

Everything is dynamic, being generated on the fly along with ajax. I add this to my grid init function.

objGrid.paint = function()
    {
        var h = this.getScrollTemplate().element().offsetHeight;
        var w = this.getScrollTemplate().element().offsetWidth;

        this.setTimeout(function(){
            this.setContentHeight(h, "total");
            this.setContentWidth(w, "total");

            this._virtualController.paint.call(this);
        });
    }

    objGrid.onColumnWidthChanged = function ()
    {
        objGrid.paint();
    }

Then, I simply call paint when my div needs to be resized manually. This function is called. The function "handleEventWithDelay" is something I had to add for IE. When client is being resized, IE will trigger like 200 (as many as it can) resize events, while other browsers are wise enough to wait for resize to end (on mouse out). This function will make sure it's only called once (using a timer and flags). Else it'll try to paint 200 times, which can be damn slow.

<body onresize="handleEventWithDelay('resizeDivisions()');>"
    <div id="container">
    </div>
</body>

I test my paint function in case paint function wasn't initialized yet.

function resizeDivisions()
{
    ....
    resize div container
    ....

    if (objGrid.paint)
    {
        objGrid.paint();
    }
    objGrid.refresh();
}

An easier way:
if(!AW.ie) { objGrid.paint() }
else { objGrid.refresh() }