[CLOSED] KeyNav in GridPanel to Add Row

  1. #1

    [CLOSED] KeyNav in GridPanel to Add Row

    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
            }
    Attached Thumbnails ErrorKeyNav.png  
    Last edited by Daniil; Dec 21, 2014 at 1:26 PM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    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?
  4. #4
    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.

Similar Threads

  1. [CLOSED] GridPanel and KeyNav
    By tad in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 13, 2014, 9:35 AM
  2. [CLOSED] Help! Need DataView w/KeyNav & ScrollIntoView
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 31, 2012, 1:56 PM
  3. Ext.NET DataView with KeyNav Support (Improved)
    By NickBin in forum Examples and Extras
    Replies: 3
    Last Post: Jan 20, 2012, 5:25 PM
  4. Ext.NET DataView with KeyNav Support
    By NickBin in forum Examples and Extras
    Replies: 6
    Last Post: Dec 18, 2011, 3:47 PM
  5. [CLOSED] KeyNav Tab Event Firing Inconsistently
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 10, 2011, 1:09 PM

Tags for this Thread

Posting Permissions