[CLOSED] Scroll to selected row in GridPanel

  1. #1

    [CLOSED] Scroll to selected row in GridPanel

    Hi
    I have a DropDownField that shows a gridpanel with a id and a text. The dropdownfield has a start value which I select in the gridpanel (this works) by this code:
    App.gpEditUtforare.getSelectionModel().select(App.storeEditUtforare.find('ID', this.getValue()))
    Then I want the gridpanel to scroll to that selected row.
    I tried with focusRow(), but I can't get it to work. I hope you can give me some help without a full example.

    <ext:DropDownField runat="server">
                                                                    <Listeners>
                                                                        <Expand Handler="this.picker.setWidth(300); App.gpEditUtforare.getSelectionModel().select(App.storeEditUtforare.find('ID', this.getValue()))" />
                                                                    </Listeners>
                                                                    <Component>
    
    
                                                                        <ext:GridPanel
                                                                            runat="server"
                                                                            ID="gpEditUtforare"
                                                                            StripeRows="true"
                                                                            Height="250"
                                                                            Border="false"
                                                                            Header="false"
                                                                            ColumnLines="true">
                                                                            <Store>
                                                                                <ext:Store
                                                                                    ID="storeEditUtforare"
                                                                                    GroupField="ID"
                                                                                    runat="server">
                                                                                    <Model>
                                                                                        <ext:Model runat="server">
                                                                                            <Fields>
                                                                                                <ext:ModelField Name="ID" Type="String" />
                                                                                                <ext:ModelField Name="NAMN" Type="String" />
                                                                                            </Fields>
                                                                                        </ext:Model>
                                                                                    </Model>
                                                                                </ext:Store>
                                                                            </Store>
                                                                            <ColumnModel runat="server">
                                                                                <Columns>
                                                                                    <ext:Column runat="server" Header="ID" Width="100" DataIndex="ID"></ext:Column>
                                                                                    <ext:Column runat="server" Header="Namn" Flex="1" DataIndex="NAMN"></ext:Column>             
                                                                                </Columns>
                                                                            </ColumnModel>
                                                                            <Listeners>
                                                                                <RowClick Handler="this.dropDownField.setValue(record.data.ID);"></RowClick>
                                                                            </Listeners>                                                                        
                                                                        </ext:GridPanel>
                                                                    </Component>
                                                                </ext:DropDownField>
    Thanks
    Mikael
    Last edited by fabricio.murta; Mar 26, 2020 at 7:18 PM.
  2. #2
    Hello Mikael!

    If you get one and only one record selected in the grid every time, you can use the grid view's getRow() method to scroll the grid to the record you have selected -- as long as it is rendered and in the page you are.

    If your grid uses buffered rendering and is long enough to have the record not rendered at all times, it may become unable to determine where to scroll to. If you have paging feature in the grid, you'd need also to ensure the selected record is in the current page before you can try to scroll.

    Given the context you provided, this should be enough to scroll to the selected entry, when you do the selection in the code you shown first:

    var grid = App.gpEditUtforare,
        store = grid.getStore(),
        view = grid.getView();
    
    view.getRow(store.getAt(store.find("ID", this.getValue())).scrollIntoView();
    You may want to double check whether store.getAt() can return something valid, i.e. store.find() result is an index >= 0.

    The scrollIntoView() bit comes from browser implementation; the getRow() method returns a DOM Element. Documentation on Element.scrollIntoView().

    I believe this is as far and deep we can get with the provided information. If still in trouble, I am afraid we would require a test case.

    Hope this helps, nevertheless!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi
    That worked perfectly, thanks a lot!

    /Mikael
  4. #4
    Hello Mikael!

    Glad we could help with the tips provided, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. LiveSearch and scroll to selected row
    By SaleCar in forum 3.x Help
    Replies: 5
    Last Post: Mar 03, 2015, 5:04 PM
  2. Replies: 2
    Last Post: Jan 07, 2015, 7:07 PM
  3. Replies: 2
    Last Post: Dec 25, 2009, 2:56 PM
  4. [CLOSED] How to scroll to selected row
    By tansu in forum 1.x Premium Help
    Replies: 8
    Last Post: May 17, 2009, 3:55 PM
  5. Replies: 0
    Last Post: Mar 16, 2009, 8:46 AM

Posting Permissions