[CLOSED] KeyNav in GridPanel to Add Row

[osef]

Hi, I want to add a row in a GridPanel with the key down (the last row), I am using the keynav but It is not working, Could you please to help me to complete my example?

        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>

        <ext:GridPanel
            ID="gpGruposMenu"
            runat="server"
            Height="420"
            Width="960"
            Title="GRUPOS MEN?"
            EnableColumnHide="false"
            EnableColumnMove="false"
            Header="true"
            TitleAlign="Left"
            StyleSpec="margin:0 auto; margin-top: 20px;">
            <Store>
                <ext:Store
                    ID="sGruposMenu"
                    runat="server">
                    <Model>
                        <ext:Model ID="mGruposMenu" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Descripcion" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Sorters>
                        <ext:DataSorter Property="ID" Direction="ASC" />
                    </Sorters>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column 
                        ID="cID"
                        runat="server"
                        Text="ID"
                        Align="Center"
                        Width="100"
                        DataIndex="ID">
                        <Editor>
                            <ext:TextField
                                ID="txtfID"
                                runat="server"
                                MaxLength="3"
                                EnforceMaxLength="true"
                                ReadOnly="true">
                                <Listeners>
                                    <SpecialKey Handler="if (e.getKey() === e.ENTER) {
                                                             this.up('gridpanel').enterWasPressed = true; 
                                                         }">
                                    </SpecialKey>
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column
                        ID="cDescripcion"
                        runat="server"
                        Text="DESCRIPCI?N"
                        Align="Left"
                        Width="858"
                        DataIndex="Descripcion">
                        <Editor>
                            <ext:TextField
                                ID="txtfDescripcion"
                                runat="server"
                                MaxLength="50"
                                EnforceMaxLength="true">
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <KeyNav ID="knGruposMenu" runat="server">
            </KeyNav>
            <View>
                <ext:GridView
                    ID="gvGruposMenu"
                    runat="server"
                    StripeRows="true">
                </ext:GridView>
            </View>
            <Plugins>
                <ext:CellEditing ID="ceGruposMenu" runat="server" ClicksToEdit="1">
                </ext:CellEditing>
            </Plugins>
            <SelectionModel>
                <ext:RowSelectionModel
                    ID="rsmGruposMenu"
                    runat="server">
                </ext:RowSelectionModel>
            </SelectionModel>
            <FooterBar>
                <ext:StatusBar
                    ID="sbGruposMenu"
                    runat="server"
                    Text=""
                    StatusAlign="Left">
                </ext:StatusBar>
            </FooterBar>
        </ext:GridPanel>

        protected void Page_Load(object sender, EventArgs e)
        {
            List<GrupoMenu> lGruposMenu = new List<GrupoMenu>();
            for (int i = 0; i < 10; i++)
            {
                GrupoMenu oGrupoMenu = new GrupoMenu();
                oGrupoMenu.ID = "ID" + i;
                oGrupoMenu.Descripcion = "Descripcion" + i;
                lGruposMenu.Add(oGrupoMenu);
            }

            sGruposMenu.DataSource = lGruposMenu;
            sGruposMenu.DataBind();
        }

        public class GrupoMenu
        {
            #region Campos

            string id;
            string descripcion;

            #endregion

            #region Propiedades

            public string ID
            {
                get { return id; }
                set { id = value; }
            }

            public string Descripcion
            {
                get { return descripcion; }
                set { descripcion = value; }
            }

            #endregion
        }

[Daniil]

Hi @osef,

It might be problematic to use a custom KeyNav, because it will be probably conflicting with the internal one that is used in a GridPanel.

Personally, I would try to override the internal key down handler.

Example

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

<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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var myOnKeyDown = function (e) {
             var newRecord = this.views[0].walkRecs(e.record, 1);

            if (newRecord) {
                this.afterKeyNavigate(e, newRecord);
            }

            console.log("Do something here.");
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <CustomConfig>
                        <ext:ConfigItem Name="onKeyDown" Value="myOnKeyDown" Mode="Raw" />
                    </CustomConfig>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

[osef]

Thank you Daniil, I only want to know, how Can I to do with the KeyNav? or How does this work event in a GridPanel?

[Daniil]

how Can I to do with the KeyNav?

This appears to be working.

Example

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

<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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:KeyNav runat="server" Target="App.GridPanel1.getView().el">
            <Down Handler="console.log('Down');" />
        </ext:KeyNav>
    </form>
</body>
</html>

or How does this work event in a GridPanel?

Sorry, I don't understand the question.