What's New?

[CLOSED] EditableGrid Plugin - how to avoid page postback on Enter key while editing row

  1. #1
    Oct 12, 2011, 3:55 PM

    [CLOSED] EditableGrid Plugin - how to avoid page postback on Enter key while editing row

    Hi,

    We are using ext:GridPanel with plugin for editing rows. It works fine when user press Update button on row editor, but if Enter keyboard button is pressed the whole page is posted back in the middle of editing process that causes the loss of user's work as we allow to edit multiple rows before saving them to server in bulk (need to do bulk validation).
    We tried to play with available properties on events like in the sample below, but couldn't get rid of undesirable behaviour to postback on Enter key. 

                                            <Plugins>
                                            <ext:RowEditor ID="RowEditor1"  runat="server" SaveText="Update" >
                                                <Listeners>
                                                    <PreEdit Handler="getEntityOwners(this);" StopEvent="true"  />
                                                    <AfterEdit Handler="updateTotal(this);" AutoPostBack="false" StopPropagation="true" StopEvent="true" Delay="100" AutoDataBind="false" /> 
                                                </Listeners>
                                            </ext:RowEditor>
                                        </Plugins>
    There is no KeyDown event available on ext:RowEditor to interrupt/ignore key code 13. Can you advise us how to disable page postback on Enter key while editing row please. Let me know if you need full source code for the page - I'll have to cut it down to only relevant to this problem code.

    Thank you!
    Last edited by Daniil; Oct 14, 2011 at 6:17 AM. Reason: [CLOSED]
  2. #2
    Oct 12, 2011, 4:05 PM
    Hi,

    I can't reproduce. Here is my test case. Could you provide your one?

    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)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            this.Store1.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" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditor runat="server" />
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Oct 12, 2011, 6:15 PM
    Thanks for quick reply, Daniil!

    Below is your original example slightly modified by adding two asp controls and check for regular postback.
    Steps to reproduce:
    - load page
    - double click on the any row in the first column
    - start to edit value and press Enter keyboard key
    - page post back should be triggered now, verified by me by putting breakpoint in code or visually through txtDebug text.

    Please let me know if you can't reproduce it.
    Thanks very much!
    oleg

    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            txtDebug.Text = "Init load";
        else
            txtDebug.Text += "; Post back at " + DateTime.Now.ToShortTimeString();
        
        
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            this.Store1.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 id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <asp:TextBox ID="txtDebug" Rows="10" Width="800" Wrap="true"  runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditor ID="RowEditor1" runat="server" />
            </Plugins>
        </ext:GridPanel>
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
    </form>
</body>
</html>
  4. #4
    Oct 12, 2011, 7:45 PM
    Well, somehow <asp:Button> has focus under IE and when you press Enter that button "thinks" it's your Enter.

    The issue is not reproducible under FF (I bet under Chrome as well).

    What about to replace that <asp:Button> with an <ext:Button>?
    <ext:Button runat="server" Text="Submit" AutoPostBack="true" />
  5. #5
    Oct 12, 2011, 8:58 PM
    Thanks Daniil!
    That should be acceptable workaround, but if not is there anything else you can think of to make asp:Button co-exist with grid editor? For example, can we hook to KeyDown event on RowEditor? And we need it to be working in IE unfortunately.

    Thanks,
    oleg
  6. #6
    Oct 13, 2011, 8:33 AM
    I can suggest to use the SpecialKey event of an editor.
    <ext:Column Header="Test" DataIndex="test">
    <Editor>
        <ext:TextField runat="server" EnableKeyEvents="true">
            <Listeners>
                <SpecialKey Handler="if (e.getKey() === e.ENTER) {
                                         e.stopEvent();
                                     }" />
            </Listeners>
        </ext:TextField>
    </Editor>
</ext:Column>
  7. #7
    Oct 13, 2011, 9:51 PM
    Thanks very much, Daniil!

Similar Threads

  1. [CLOSED] EditableGrid Plugin bug
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 24, 2011, 7:31 PM
  2. GridPanel Editor :- Stop editing on enter key
    By vivekrane1986 in forum 1.x Help
    Replies: 2
    Last Post: Oct 22, 2010, 9:50 AM
  3. [CLOSED] EditableGrid Plugin - Problem using Tab key
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 09, 2010, 1:59 PM
  4. [CLOSED] [1.0] EditableGrid Plugin Error
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Feb 26, 2010, 1:14 PM
  5. [CLOSED] How to avoid form flickering while postback
    By king1231986 in forum 1.x Help
    Replies: 4
    Last Post: Nov 06, 2008, 1:54 AM

Tags for this Thread

Posting Permissions