[CLOSED] How to set the scroll bar back to top in a gridpanel.

  1. #1

    [CLOSED] How to set the scroll bar back to top in a gridpanel.

    Hello,
    After the page load the scroll bar automatically goes to the bottom. How to set it back to top.

    Click image for larger version. 

Name:	scroll.PNG 
Views:	129 
Size:	20.4 KB 
ID:	24018
    Last edited by Daniil; Jun 09, 2015 at 4:36 PM. Reason: [CLOSED]
  2. #2
    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
    }
  3. #3
    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));
                }
  4. #4
    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.selectionchange.suspend(); //to stop this event from firing again
    }
    Last edited by EnZo; Jun 09, 2015 at 9:20 AM.
  5. #5
    Thanks EnZO :)
    Its working fine. Thread can be closed.!!

Similar Threads

  1. [CLOSED] Passing values back from a GridPanel
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 30, 2013, 2:51 PM
  2. Replies: 1
    Last Post: Apr 13, 2012, 1:50 PM
  3. Replies: 1
    Last Post: Apr 11, 2012, 3:12 PM
  4. [CLOSED] Change color of the back of a gridpanel row
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 25, 2011, 7:31 PM
  5. Gridpanel - conditional back color, how to ?
    By NestorLeone in forum 1.x Help
    Replies: 3
    Last Post: Jul 23, 2009, 10:46 AM

Tags for this Thread

Posting Permissions