[CLOSED] GridPanel Column Editor PLUGIN: disable Enter KEY on default button Update and Cancel

  1. #1

    [CLOSED] GridPanel Column Editor PLUGIN: disable Enter KEY on default button Update and Cancel

    Hi,
    please, I would to prevent to press the Enter KEY on the fields of a edited row of a grid so as for Update/Cancel button

    I have been able to disable Enter key on the textfields, combobox and so on but I would extend the same on the Update/Cancel buttons

    for textfields I used the following

                                                <Listeners>
                                                    <SpecialKey Fn="ignoreEnterKey" />
                                                </Listeners>
    I tried globally, on the page, to ignore the enter key as follows

    
    <body onkeypress="return disableEnterKey(event)">
    but if accidentally using the tab key the user move to the update button and press Enter, this is not trapped

    Is there a way to disable the Enter key also for the buttons?

    thanks in advance

    I leave here the whole example

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ 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 List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
    
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <ext:XScript ID="XScript1" runat="server">
            <script>
                var ignoreEnterKey = function (field, eventArgs) {
                    if (eventArgs.getKey() == eventArgs.ENTER) {
                        eventArgs.stopEvent();
                    }
                };
    
                function disableEnterKey(e) {
                    var key;
                    if (window.event)
                        key = window.event.keyCode;
                    else
                        key = e.which;    
    
                    return (key != 13);
                }
    
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.editingPlugin.cancelEdit();
    
                    // Create a record instance through the ModelManager
                    var r = Ext.ModelManager.create({
                        name: 'New Guy',
                        email: 'new@object.net',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    }, 'Employee');
    
                    grid.store.insert(0, r);
                    grid.editingPlugin.startEdit(0, 0);
                };
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1},
                        sm = grid.getSelectionModel();
    
                    grid.editingPlugin.cancelEdit();
                    grid.store.remove(sm.getSelection());
                    if (grid.store.getCount() > 0) {
                        sm.select(0);
                    }
                };
            </script>
        </ext:XScript>
    </head>
    <body onkeypress="return disableEnterKey(event)">
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            GridPanel with RowEditor Plugin</h1>
        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" Frame="true"
            Title="Employees">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Sorters>
                        <ext:DataSorter Property="start" Direction="ASC" />
                    </Sorters>
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Employee">
                            <Fields>
                                <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
            </Plugins>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
                            <Listeners>
                                <Click Fn="addEmployee" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
                            Disabled="true">
                            <Listeners>
                                <Click Fn="removeEmployee" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
                    <ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false">
                                <Listeners>
                                    <SpecialKey Fn="ignoreEnterKey" />
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email">
                                <Listeners>
                                    <SpecialKey Fn="ignoreEnterKey" />
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
                        Format="MM/dd/yyyy" Width="100">
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
                                MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
                                MaxDate="<%# DateTime.Now %>" AutoDataBind="true">
                                <Listeners>
                                    <SpecialKey Fn="ignoreEnterKey" />
                                </Listeners>
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                    <ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
                        Format="$0,0">
                        <Editor>
                            <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
                                MaxValue="150000">
                                <Listeners>
                                    <SpecialKey Fn="ignoreEnterKey" />
                                </Listeners>
                            </ext:NumberField>
                        </Editor>
                    </ext:NumberColumn>
                    <ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
                        Width="50">
                        <Editor>
                            <ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor">
                                <Listeners>
                                    <SpecialKey Fn="ignoreEnterKey" />
                                </Listeners>
                            </ext:Checkbox>
                        </Editor>
                    </ext:CheckColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 12, 2013 at 6:35 PM. Reason: [CLOSED]
  2. #2
    Hi @tanky65,

    Please remove all the SpecialKey listeners and put this one for the GridPanel.
    <AfterRender Handler="this.editingPlugin.editor.on('afterrender', function () {    
                                Ext.Array.erase(this.keyNav.map.bindings, 0, 1);        
                            });" 
                    Delay="1" />
    It should meet your requirement.
  3. #3
    thanks Daniil,

    i tried in the example but it seems it doesn't work..
    I went in debug (IE10) in afterrender and seems that event doesn't fire ..
    I removed all the specialkeys and added the afterrender to the listener of the gridpanel

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ 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 List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
    
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <ext:XScript ID="XScript1" runat="server">
            <script>
                var ignoreEnterKey = function (field, eventArgs) {
                    if (eventArgs.getKey() == eventArgs.ENTER) {
                        eventArgs.stopEvent();
                    }
                };
    
                function disableEnterKey(e) {
                    var key;
                    if (window.event)
                        key = window.event.keyCode;
                    else
                        key = e.which;    
    
                    return (key != 13);
                }
    
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.editingPlugin.cancelEdit();
    
                    // Create a record instance through the ModelManager
                    var r = Ext.ModelManager.create({
                        name: 'New Guy',
                        email: 'new@object.net',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    }, 'Employee');
    
                    grid.store.insert(0, r);
                    grid.editingPlugin.startEdit(0, 0);
                };
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1},
                        sm = grid.getSelectionModel();
    
                    grid.editingPlugin.cancelEdit();
                    grid.store.remove(sm.getSelection());
                    if (grid.store.getCount() > 0) {
                        sm.select(0);
                    }
                };
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            GridPanel with RowEditor Plugin</h1>
        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" Frame="true"
            Title="Employees">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Sorters>
                        <ext:DataSorter Property="start" Direction="ASC" />
                    </Sorters>
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Employee">
                            <Fields>
                                <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
            </Plugins>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
                        </ext:Button>
                        <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete"
                            Disabled="true">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
                    <ext:Column ID="Column1" runat="server" Text="Name" DataIndex="name" Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false">
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column ID="Column2" runat="server" Text="Email" DataIndex="email" Width="160">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email">
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Start Date" DataIndex="start"
                        Format="MM/dd/yyyy" Width="100">
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" AllowBlank="false" Format="MM/dd/yyyy"
                                MinDate="01.01.2006" MinText="Can not have a start date before the Company existed."
                                MaxDate="<%# DateTime.Now %>" AutoDataBind="true">
                            </ext:DateField>
                        </Editor>
                    </ext:DateColumn>
                    <ext:NumberColumn ID="NumberColumn1" runat="server" Text="Salary" DataIndex="salary"
                        Format="$0,0">
                        <Editor>
                            <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
                                MaxValue="150000">
                            </ext:NumberField>
                        </Editor>
                    </ext:NumberColumn>
                    <ext:CheckColumn ID="CheckColumn1" runat="server" Text="Active?" DataIndex="active"
                        Width="50">
                        <Editor>
                            <ext:Checkbox ID="Checkbox1" runat="server" Cls="x-grid-checkheader-editor">
                            </ext:Checkbox>
                        </Editor>
                    </ext:CheckColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
                <AfterRender Handler="this.editingPlugin.editor.on('afterrender', function () {    
                                Ext.Array.erase(this.keyNav.map.bindings, 0, 1);        
                            });" Delay="1" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    It appears to be working for me in IE10 and the latest Ext.NET from SVN trunk. What Ext.NET version are you using?
  5. #5
    I'm using this one

    Click image for larger version. 

Name:	extdll.png 
Views:	24 
Size:	16.8 KB 
ID:	6354
  6. #6
    Hi,

    I tried now with the following version and it works properly

    Thanks Daniil, i think it's ok

    Click image for larger version. 

Name:	extdll-22.png 
Views:	18 
Size:	16.9 KB 
ID:	6355
    Last edited by tanky65; Jun 12, 2013 at 2:57 PM. Reason: wrong english
  7. #7
    The thread is related to this one:
    http://forums.ext.net/showthread.php?25396

Similar Threads

  1. Replies: 13
    Last Post: Dec 05, 2012, 6:55 AM
  2. Replies: 1
    Last Post: Aug 29, 2012, 12:32 PM
  3. How to disable column of EditableGrid Plugin
    By abhijit in forum 1.x Help
    Replies: 2
    Last Post: Mar 06, 2012, 4:26 AM
  4. Replies: 2
    Last Post: Nov 26, 2010, 6:30 PM
  5. GridPanel Editor :- Stop editing on enter key
    By vivekrane1986 in forum 1.x Help
    Replies: 2
    Last Post: Oct 22, 2010, 9:50 AM

Tags for this Thread

Posting Permissions