Scrolling to particular row in grid

Hi.

Is it possible to scroll to a particular row in grid?

Regards.

Very strange - in regular function, the focusRow() works correctly. When called within GridView refresh() event, it scrolls to exactly one item before the requested one.

This seems as a possible bug, any opinion?

Btw, all I want to do, is simply scrolling to the edited row, after the grid was reloaded and got new details from server. Perhaps there is an easier way to do it, rather then focusing to row on refresh?

Thanks in advance.

No, I refresh first, then focus.

Here is a bit of code:

app.org.Grid=Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
Ext.apply(this, {
store: app.org.remoteStore,
cm: new Ext.grid.ColumnModel([
{header: "Name", dataIndex:'name', width: 200, sortable: true},
{header: "HQ Address", dataIndex:'hqaddress', width: 120, sortable: true},
{header: "Phone", dataIndex:'hqphone', width: 120, sortable: true},
{header: "Contact Name", dataIndex:'hqcontact', width: 120, sortable: true}
]),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
view: new Ext.grid.GridView({listeners: {refresh: app.org.gridRefresh}})
});

app.org.Grid.superclass.initComponent.apply(this, arguments);
},

listeners: {
rowclick: app.org.selectRow,
},

});

app.org=function(){

selectRow: function(grid, rowIndex, e){
grid.getView().focusRow(15); //Here it works, scrolls to the last line as needed (there are 15 lines in total).
},

gridRefresh: function(gridView){
gridView.focusRow(15); // here it doesn't, scrolls to exactly one line before the required one
}
}(); //EOF app.org

Re-edit:

I did used the focusRow as you suggested, but every time I use it, it scrolls the screen just above the requested row.

For example this code would show the row before the requested one as the last visible row in the grid:

gridView.focusRow(10); //Should show the 11th row, but would only show rows 1-10.

Thanks in advance.

A bug????

You are just producing javascript code that won't compile, and ignoring it.

You might as well code at random.

What is

app.org=function(){

selectRow: function(grid, rowIndex, e){
grid.getView().focusRow(15); //Here it works, scrolls to the last line as needed (there are 15 lines in total).
},

gridRefresh: function(gridView){
gridView.focusRow(15); // here it doesn't, scrolls to exactly one line before the required one
}
}(); //EOF app.org

supposed to do?

read that code, line by line, and describe what it does. I await with baited breath.

Ok, perhaps I don't understand something after all.

1) I'm doing the focus operation in the refresh event, which according to docs happens after the GridView body was refreshed.
2) According to how I understand it, GridView refresh fires only after the store was sucesfully reloaded.

Is it so?

http://dev.extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=focusRow

Hmm. It works for me, it shows the row.

It's a sample code to illustrate the issue - I didn't include the full code of course in order not to clutter the topic.

You do right that I forgot to put the "return" part - sorry for that.

Here is the updated part:

app.org=function(){
return {

selectRow: function(grid, rowIndex, e){
grid.getView().focusRow(15); //Here it works, scrolls to the last line as needed (there are 15 lines in total).
},

gridRefresh: function(gridView){
gridView.focusRow(15); // here it doesn't, scrolls to exactly one line before the required one
}
} //EOF return
}(); //EOF app.org

So you didn't take any notice of teh answers you were given?

focusRow

Or do you load the Store from the server (Which is asynchronous, as is flagged up in the docs, and has been mentined here MANY times), and then call refresh before the data has returned?

No :).

I told you, I forgot to include the "return" in my sample.

The exact code above, acts like marked in comments - scrolls correctly when called from regular function, scrolls incorrectly when called from refresh event handler.

read that code, line by line, and describe what it does. I await with baited breath.

:)

app.org=function(){ //Starts namespace
return { //gets to public functions

selectRow: function(grid, rowIndex, e){ //Row selection event handler
grid.getView().focusRow(15); //Here it works, scrolls to the last line as needed (there are 15 lines in total).
},

gridRefresh: function(gridView){ //Grid refresh event handler
gridView.focusRow(15); // here it doesn't, scrolls to exactly one line before the required one
}
} //End of return path
}(); //End and auto-run of the namespace

Are you runnning with Firebug?

You can do like this:
grid.getView().focusRow(ds.indexOfId(cId));

where cId got as follows:
cId = selModel.getSelections()[0].data.id;

So you focus the row, then refresh?

Thanks, I looked for some scrollTo function :).

And you have a listener on the "refresh" event to focus the row?

That's correct, the refresh event should happen after the rows are all present. Something funny is happenning.

Just to clarify, I'm not calling refresh. I'm simply calling reload() of the store, which in turn refreshes the grid beyond the stages.

Does it work now then?

No, I'm testing it in IE7.

Just tried FF2 (with Fb), it has even a worser effect - the grid simply don't scroll in the refresh event.

So it seems as a possible bug after all.

Hi.

I finally started to use it, but it does not work correctly?

When I try to scroll to a row, the grid scrolls exactly on position before it, so the row is hidden. Any idea if it's a bug?

Regards.

Any idea?

Yes, as in code above. As I said, it's only task is to scroll the GridView to the selected row after reload.

Btw, the row does stay selected after reload (guess it's effect of the id config option). Perhaps scrolling to row would be a good option as well.

#If you have any other info about this subject , Please add it free.#

16 March 2010 | cameltoepants.com | edit