PDA

View Full Version : [CLOSED] How to set the scroll bar back to top in a gridpanel.



arjunrvasisht
Jun 09, 2015, 6:51 AM
Hello,
After the page load the scroll bar automatically goes to the bottom. How to set it back to top.

24018

EnZo
Jun 09, 2015, 7:41 AM
Hi arjunrvasisht

By default, the scroll bar should be automatically placed at the top. I suspect there is something overriding this. If you could post a sample maybe we can figure what is causing this.

For now, I can suggest this fix.

Set up a listener on your store


<Listeners>
<Load Delay="1" Fn="scrollGrid" />
</Listeners>


The delay is set to 1 second to ensure that the loading has completed. You can increase it as needed if you want, though I think it should be enough.

And the following JavaScript


var scrollGrid = function (store) {
var scrollHeight = store.count() * 20; //total number of records in the store multiplied by the row height which is 20
App.grid.scrollByDeltaY(-scrollHeight); //scroll negative to scroll upwards
}

arjunrvasisht
Jun 09, 2015, 8:36 AM
Hi EnZo,

Well, I tried the code u have given but its not working. And as u said by default it will be at the top. But in the server side I am using checkbox selection model. And i am checking few rows in page load. So the scroll bar automatically comes down as my row selection goes. If i am checking only first few rows den the scroll bar stays at the top.

Is there any property which I can set from server side to keep the scroll bar at the top after the checkbox selection model is completed.


CheckboxSelectionModel cbm = this.grdTier3Mapping.SelectionModel.Primary as CheckboxSelectionModel;
cbm.SelectedRows.Clear();
cbm.UpdateSelection();
RowSelectionModel sm = this.grdTier3Mapping.SelectionModel.Primary as RowSelectionModel;

foreach (int j in t3NamesInUse)
{
sm.SelectedRows.Add(new SelectedRow(j));
}

EnZo
Jun 09, 2015, 9:15 AM
Hi arjunrvasisht

Yes, I didn't realize you were using a Checkbox Selection Model. I missed that from the attached picture!

In that case, I can suggest this fix.

Add a SelectionChange listener to your Checkbox Selection Model such as this


<ext:CheckboxSelectionModel runat="server">
<Listeners>
<SelectionChange Fn="scrollGrid" />
</Listeners>
</ext:CheckboxSelectionModel>


And then update the JavaScript function from before to this


var scrollGrid = function () {
var scrollHeight = App.grid.store.count() * 20; //total number of records in the store multiplied by the row height which is 20
App.grid.scrollByDeltaY(-scrollHeight); //scroll negative to scroll upwards
App.grid.getSelectionModel().events.selectionchang e.suspend(); //to stop this event from firing again
}

arjunrvasisht
Jun 09, 2015, 10:09 AM
Thanks EnZO :)
Its working fine. Thread can be closed.!!