Retain Scrollbar Position after Column Sort

I just noticed that the scrollbar location is not being retained to its original position after sorting a column. I noticed this issue on the sample located in the main page. Is there a workaround on this issue? Thanks.

i mentioned this while adding new row and refreshing. when i want to set new position immediatly after refresh, it allways scrolls to top. it seems to me that some scrollbar refresh code is called after my row position setup.

is there a some solution?


thanks,
boris

yes, you can use this code to restore scrollbars after refresh:

var _refresh = obj.refresh;

obj.refresh = function(){

    var scrollbars = this.getTemplate("layout").getContent("scrollbars");

    var x = scrollbars.element().scrollLeft;
    var y = scrollbars.element().scrollTop;

    _refresh.call(this);

    this.element().runtimeStyle.visibility = "hidden";

    var _obj = this;

    window.setTimeout(function(){
        scrollbars.element().scrollLeft = x;
        scrollbars.element().scrollTop = y;
        _obj.element().runtimeStyle.visibility = "visible";
        _obj.element().focus();
    }, 0 );

}

or, if you want to scroll into particular row, look this one:

http://www.activewidgets.com/messages/1668-5.htm

I'm having trouble with this.
I added the code, and upon refresh, the scrollbar retains it position.
However the table itself does not.
For example, I scroll to the right so that the 5th column is the left-most visible column (except for the "locked" column I created following this example: javascript.forum.1393.4/fixed-columns-in-ver-1.html).
I click on a column header and the columns sort.
The grid is refreshed. The scrollbar is still to the right, but the first visible column is the first column. It's no longer the fifth column.

Any ideas?

Thanks.

When I tried the code listed above, I had the same problem as Johnny: the scrollbars would retain their positions after refresh(), but the table data would be scrolled to the zero (top left) position. The modified code below seems to fix that problem, by recording and restoring the data position as well as the scrollbar positions.

var _refresh = obj.refresh;

obj.refresh = function(){

    var scrollbars = this.getTemplate("layout").getContent("scrollbars");

    var x = scrollbars.element().scrollLeft;
    var y = scrollbars.element().scrollTop;

    var data = getTemplate("layout").getContent("data");
    var data_x = data.element().scrollLeft;
    var data_y = data.element().scrollTop;

    _refresh.call(this);

    this.element().runtimeStyle.visibility = "hidden";

    var _obj = this;

    window.setTimeout(function(){
        scrollbars.element().scrollLeft = x;
        scrollbars.element().scrollTop = y;

        data.element().scrollLeft = data_x;
        data.element().scrollTop = data_y;

        _obj.element().runtimeStyle.visibility = "visible";
        _obj.element().focus();
    }, 0 );

}

Oops. In the code above, this line:

var data = getTemplate("layout").getContent("data");

should of course be

var data = this.getTemplate("layout").getContent("data");

Alex's code works fine in IE with the column headers, data and scrollbars retaining their position after sort,

but...

Firefox/Netscape only retains the scrollbar position after sort. Column headers and data goes back on top-left of the grid.


CK's code works fine in Firefox/Netscape, but sometimes the column headers are not aligned with the column data. I dunno why but sometimes after sorting the column headers are on the top-left of the grid while the scrollbars and column data retains their position.

:c(

I also noticed that if the grid overflows and scrollbars appears, CK's code in FireFox/Netscape after column sort the columns are not aligned with their respective data. The position of data are correct after sorting but the column headers shown are the leftmost column names. They will be aligned correctly when you move the vertical scrollbar. How troublesome...

Is there anyone that has a solution to this problem? :c(

Nevermind. I already resolved the problem. Here's my workaround:

var _refresh = obj.refresh;
obj.refresh = function(){					
    var scrollbars = this.getTemplate("layout").getContent("scrollbars");					
    var x = scrollbars.element().scrollLeft;
    var y = scrollbars.element().scrollTop;					
    var data = this.getTemplate("layout").getContent("data");
    var data_x = data.element().scrollLeft;
    var data_y = data.element().scrollTop;
    var top = this.getTemplate("layout").getContent("top");
    var top_x = top.element().scrollLeft;
    var top_y = top.element().scrollTop;
    _refresh.call(this);					
    this.element().runtimeStyle.visibility = "hidden";					
    var _obj = this;					
    window.setTimeout(function(){
        scrollbars.element().scrollLeft = x;
        scrollbars.element().scrollTop = y;					
        data.element().scrollLeft = data_x;
        data.element().scrollTop = data_y;
        top.element().scrollLeft = top_x;
        top.element().scrollTop = top_y;
        _obj.element().runtimeStyle.visibility = "visible";
        _obj.element().focus();
    }, 0 );
}

This really solves the problem in FireFox and Netscape in retaining scroll position after column sort with the column and their respective data aligned correctly with the scrollbar even with large dataset. It also solves the minor bug in IE wherein after sorting large dataset the column shakes before alignment.