[CLOSED] scroll through grid with up-down keys

**CarWise** · Oct 01, 2010, 2:26 PM

Hi,

When setting the first selected row in javascript (through store listener) like this:

 <%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    private static object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] {"Group A", 71.72},
                new object[] {"Group A", 29.01},
                new object[] {"Group A", 83.81},
                new object[] {"Group B", 52.55},
                new object[] {"Group B", 64.13},
                new object[] {"Group B", 31.61},
                new object[] {"Group C", 75.43},
                new object[] {"Group C", 67.27},
                new object[] {"Group C", 49.37}
            };
        }
    }
 
    protected void RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        string field = e.Parameters["groupBy"];
        object[] data = Data;
        if(!string.IsNullOrEmpty(field))
        {
            //Grouping
            // For example group in the following order
            //  - Group B
            //  - Group C
            //  - Group A
             
            Array.Sort<object>(data, (object o1, object o2) =>
                                         {
                                             object[] objArr1 = (object[]) o1;
                                             object[] objArr2 = (object[]) o2;
                                              
                                             if (objArr1[0] == objArr2[0])
                                             {
                                                 return 0;
                                             }
 
                                             switch (objArr1[0].ToString())
                                             {
                                                 case "Group B" :
                                                     return -1;
                                                 case "Group C":
                                                     if((string) objArr2[0] == "Group B")
                                                     {
                                                         return 1;
                                                     }
                                                     return -1;
                                                 case "Group A":
                                                     return 1;
                                             } 
                                              
                                             return 0;
                                         });
        }
 
        Store1.DataSource = data;
        Store1.DataBind();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        var doLoad = function(store, records, options) {
            GridPanel1.getSelectionModel().selectRow(0, true);
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager" runat="server" />
         
        <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshData">
            <Proxy>
                  <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
            <Listeners>                        
                <Load Fn="doLoad" />                    
        </Listeners>
        </ext:Store>
        <ext:textfield id="txtAlpha" runat="server" note="Alphanumeric" maskRe="^\w+$" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            StripeRows="true"
            Title="Array Grid"
            TrackMouseOver="true"
            Width="600"
            Height="350"
            AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel> 
                <ext:RowSelectionModel ID="rsm" runat="server" SingleSelect="true"/>
            </SelectionModel>
        </ext:GridPanel>          
    </form>
</body>
</html>

I'm not able to use the arrow keys (up/down) to go to the next record. After using a mouse to select the same record. It works suddenly

Any thoughts?

Martin

**Daniil** · Oct 01, 2010, 3:13 PM

Hi Martin,

Needs to focus a row.

Please use code like this

#{GridPanel1}.getView().focusRow(0);

Also please look at this example which demonstrates how you can improve navigation behavior using 'Home' and 'End' buttons.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"test0"},
                                         new object[] {"test1"},
                                         new object[] {"test2"},
                                         new object[] {"test3"},
                                         new object[] {"test4"},
                                         new object[] {"test5"},
                                         new object[] {"test6"},
                                         new object[] {"test7"},
                                         new object[] {"test8"},
                                         new object[] {"test9"}
                                };
            store.DataBind();
        }
    }
</script>

<!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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server">
        <Listeners>
            <DocumentReady Handler="#{GridPanel1}.getView().focusRow(5);" />
        </Listeners>
    </ext:ResourceManager>
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" SingleSelect="true" SelectedIndex="4" />
        </SelectionModel>
    </ext:GridPanel>
    <ext:KeyNav runat="server" Target="={#{GridPanel1}.getBody()}">
        <Home Handler="GridPanel1.getSelectionModel().selectFirstRow();" />
        <End Handler="GridPanel1.getSelectionModel().selectLastRow();" />
    </ext:KeyNav>
    </form>
</body>
</html>

**Daniil** · Oct 01, 2010, 3:14 PM

Martin, especially thanks for the clear examples which you provides us.
It really saves our time and gives a good chance for immediately answer.

**CarWise** · Oct 04, 2010, 7:43 AM

Thank Daniil, but focusRow works on your example..but doesn't work on mine :(

Any Idea why?

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    private static object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] {"Group A", 71.72},
                new object[] {"Group A", 29.01},
                new object[] {"Group A", 83.81},
                new object[] {"Group B", 52.55},
                new object[] {"Group B", 64.13},
                new object[] {"Group B", 31.61},
                new object[] {"Group C", 75.43},
                new object[] {"Group C", 67.27},
                new object[] {"Group C", 49.37}
            };
        }
    }
 
    protected void RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        string field = e.Parameters["groupBy"];
        object[] data = Data;
        if(!string.IsNullOrEmpty(field))
        {
            //Grouping
            // For example group in the following order
            //  - Group B
            //  - Group C
            //  - Group A
             
            Array.Sort<object>(data, (object o1, object o2) =>
                                         {
                                             object[] objArr1 = (object[]) o1;
                                             object[] objArr2 = (object[]) o2;
                                              
                                             if (objArr1[0] == objArr2[0])
                                             {
                                                 return 0;
                                             }
 
                                             switch (objArr1[0].ToString())
                                             {
                                                 case "Group B" :
                                                     return -1;
                                                 case "Group C":
                                                     if((string) objArr2[0] == "Group B")
                                                     {
                                                         return 1;
                                                     }
                                                     return -1;
                                                 case "Group A":
                                                     return 1;
                                             } 
                                              
                                             return 0;
                                         });
        }
 
        Store1.DataSource = data;
        Store1.DataBind();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager" runat="server">
        <Listeners>
            <DocumentReady Handler="#{GridPanel1}.getView().focusRow(0);" />
        </Listeners> 
        </ext:ResourceManager>
         
        <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshData">
            <Proxy>
                  <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
         <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            StripeRows="true"
            Title="Array Grid"
            TrackMouseOver="true"
            Width="600"
            Height="350"
            >
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel> 
                <ext:RowSelectionModel ID="rsm" runat="server" SingleSelect="true"/>
            </SelectionModel>
        </ext:GridPanel>          
    </form>
</body>
</html>

**Daniil** · Oct 04, 2010, 11:05 AM

Hi Martin,

It's because of proxy is used.

Please use the following code:

Example

<ext:GridPanel ID="GridPanel1" ....>
    ...
    <View>
        <ext:GridView runat="server">
            <Listeners>
                <Refresh 
                    Handler="#{GridPanel1}.getSelectionModel().selectRow(0); 
                            #{GridPanel1}.getView().focusRow(0);" 
                    Single="true"/>
            </Listeners>
        </ext:GridView>
    </View>
</ext:GridPanel>

**CarWise** · Oct 04, 2010, 1:09 PM

Works..thanks !

Martin

Thread: [CLOSED] scroll through grid with up-down keys

Thread Tools

Search Thread

Display

[CLOSED] scroll through grid with up-down keys

Similar Threads

[CLOSED] Navigate Grid with Arrow Keys

[CLOSED] Grid - scroll position

[CLOSED] Grid Scroll

grid scroll

[CLOSED] Grid Scroll

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] scroll through grid with up-down keys

[CLOSED] scroll through grid with up-down keys

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us