Scrolling the grid to the bottom

Rasmus · 11 Sep 2006 8:34 PM

I am adding a row and am trying to figure out how to scroll it to the bottom after the addRow. I thought something like this would work:

Grid.grid.getDataModel().addRow(resp['row']);
Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

What am I missing? I guess focusRow() doesn't do what the name implies?

Rasmus · 11 Sep 2006 9:19 PM

Ah, helps if I read the code GridView code correctly. focusRow takes the actual element, so this works:
Grid.grid.getSelectionModel().focusRow(Grid.grid.getSelectionModel().getRow(Grid.grid.getDataModel().getRowCount()-1));

**jack.slocum** · 11 Sep 2006 11:45 PM

Is this a normal grid or an editable grid? The EditorGrid overrides the SelectionModel from focusing rows to make sure the Editors get the focus. If your are not using EditorGrid, and you are using firefox, sometimes you have to set a timeout to let FireFox catch up in order to focus. Focusing in general can be flaky in FF. In the latest development version I have added a method to the main grid object that tries to scroll the row into view without focusing it:
grid.scrollTo(row);

The row argument can either be a row HTMLElement or the rowIndex. This method tries to scroll the grid without stealing focus. If you don't mind stealing focus, the preferred way to focus a row is: grid.view.focusRow(row); or if you have the latest version, grid.getView().focusRow(row). The method in the SelectionModel is just calling this method anyway, so you save a function call by calling it directly.

With the latest development version, you can change this code too:

Grid.grid.getDataModel().addRow(resp['row']);
Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

to

var index = Grid.grid.getDataModel().addRow(resp['row']);
Grid.grid.scrollTo(index);
or
Grid.grid.getView().focusRow(index);

**kovtik** · 13 Oct 2006 2:41 AM

With the latest development version, you can change this code too:

Grid.grid.getDataModel().addRow(resp['row']);
Grid.grid.getSelectionModel().focusRow(Grid.grid.getDataModel().getRowCount());

to

var index = Grid.grid.getDataModel().addRow(resp['row']);
Grid.grid.scrollTo(index);
or
Grid.grid.getView().focusRow(index);

Look at my page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="css/grid.css" />
    <script type="text/javascript" src="js/yui/yahoo.js"></script>
    <script type="text/javascript" src="js/yui/event.js"></script>
    <script type="text/javascript" src="js/yui/dom.js"></script>
    <script type="text/javascript" src="js/yui/dragdrop.js"></script>
    <script type="text/javascript" src="js/yui/connection.js"></script>
    
    <script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
</head>
<body>
    <div id="grid" style="width:250px;height:150px;overflow:hidden;position:relative;"></div>
    <input id="Button1" type="button" onclick="Test.scroll();" value="button" />
    <script type="text/javascript">
		var Test = {
                init : function(){
                    var dataSchema = {tagName: 'child', fields: ['name']};
                    var dataModel = new YAHOO.ext.grid.XMLDataModel(dataSchema);
                    
                    var columns = [ {header: "Name", width: 200, sortType: YAHOO.ext.grid.DefaultColumnModel.sortTypes.asUCString} ];
                    var columnModel = new YAHOO.ext.grid.DefaultColumnModel(columns);
                    columnModel.defaultSortable = true;
                    
                    dataModel.setDefaultSort(columnModel, 0, "ASC");
                    
                    this.grid = new YAHOO.ext.grid.Grid('grid', dataModel, columnModel);
                    this.grid.render();
                    dataModel.load('xml/getDirectoryPlayList.xml');//loading 20 records
                },
                
                scroll : function(){
                    var index = 18;
                    this.grid.scrollTo(index);//doesn't work
                    //this.grid.getView().focusRow(index); //works
                    //this.grid.getSelectionModel().focusRow(index); //works

                }
            };
            
        YAHOO.util.Event.on(window, 'load', Test.init, Test, true);
    </script>
</body>
</html>

Could you explain me this:

Code:

this.grid.scrollTo(index);//doesn't work
this.grid.getView().focusRow(index); //works
this.grid.getSelectionModel().focusRow(index); //works

**jack.slocum** · 13 Oct 2006 6:14 AM

Ok I took a look at this and did some extensive testing. I ending up redoing the method in charge of scrolling to the row. The new version will be in the release but in the meantime, you can use this patch:

Code:

YAHOO.ext.grid.GridView.prototype._ensureVisible = function(row){
        if(typeof row == 'number'){
            row = this.getBodyTable().childNodes[row];
        }
        if(!row) return;
    	var left = this.wrap.scrollLeft;
    	var rowTop = parseInt(row.offsetTop, 10); // parseInt for safari bug
        var rowBottom = rowTop + row.offsetHeight;
        var clientTop = parseInt(this.wrap.scrollTop, 10); // parseInt for safari bug
        var clientBottom = clientTop + this.wrap.clientHeight;
        if(rowTop < clientTop){
        	this.wrap.scrollTop = rowTop;
        }else if(rowBottom > clientBottom){
            this.wrap.scrollTop = rowBottom-this.wrap.clientHeight;
        }
        this.wrap.scrollLeft = left;
        this.handleScroll();
    };

Let me know if that fixes it for you. This new version also scrolls up, which the old version didn't do. It also aligns the bottom of the row to the bottom of the view instead of scrolling the row to the top of the grid.

**kovtik** · 13 Oct 2006 7:35 AM

...Let me know if that fixes it for you. This new version also scrolls up, which the old version didn't do. It also aligns the bottom of the row to the bottom of the view instead of scrolling the row to the top of the grid.

Yes, that fixed it for me with several issues:
1) record to scroll is always positioned at the second row from the bottom of the view during scrolling down;
2) record to scroll is not shown during scrolling up (it is positioned before the first row of the view).
Can the record to scroll be positioned at the top of the view if it is possible?

**jack.slocum** · 13 Oct 2006 7:59 AM

I should be - unless you are using an older version with the scrollbar overlap?

**kovtik** · 18 Oct 2006 6:04 AM

I should be - unless you are using an older version with the scrollbar overlap?

I afraid that I don't understand your question. I didn't changed scrollbarMode property of the GridView object, so by default it was set to YAHOO.ext.grid.GridView.SCROLLBARS_UNDER.

YAHOO.ext.grid.Grid.scrollTo function in 0.32.3.1 release works fine, I simply want that the record to scroll be positioned always at the top of the view not depending on the scrolling direction (now if the grid is scrolling down the record to scroll is postitioned at the bottom of the view; if the grid is scrolling up the record to scroll is positioned at the top of the view).

**jack.slocum** · 18 Oct 2006 7:23 AM

I see. You could add something like this to grid:

Code:

YAHOO.ext.grid.Grid.prototype.scrollRowToTop = function(row){
        if(typeof row == 'number'){
            row = this.getRow(row);
        }
        if(!row) return;
    	this.view.wrap.scrollTop = row.offsetTop;
    }

Scrolling the grid to the bottom

Thread Tools

Search Thread

Display

Scrolling the grid to the bottom

Scrolling the grid to the bottom

Similar Threads

Scrolling (rather than paging) grid

Grid/GridPanel: scrolling

Grid Scrolling

Tabs at the bottom? (without a layout manager)

Bottom panel has no scrollbar