[CLOSED] Editable Grid Tab Navigation Issues

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Editable Grid Tab Navigation Issues

    Hi,

    I have a gridpanel with editors, attached below is the code, There are two problems,

    1.When I press the tab key faster when the grid is in edit mode, The focus gets navigated to the controls outside the grid
    2. When the datefield gets edited it does not show the value present in cell, hence after it leaves the cell it becomes empty

    Kindly help me out asap.

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Linq" %>
    <%@ 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)
            {
                this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "tstring" });
                this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "tint" });
                this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "tdatetime" });
    
                this.Store1.DataSource = Enumerable.Range(1, 100).Select(m => new DataSource
                {
    
                    tstring = "Record" + m.ToString(),
                    tint = m,
                    tdatetime = DateTime.Now.AddDays(m)
    
                }).ToList();
    
                this.Store1.DataBind();
            }
        }
    
        public class DataSource
        {
            public string tstring { get; set; }
            public int tint { get; set; }
            public DateTime tdatetime { get; set; }
        }
    </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>
        <script type="text/javascript">
    
            function MaskAndCalculate() {
             
                Ext.getBody().mask('Please wait....', "x-mask-loading");
                var tout = setTimeout(function () {
                    Ext.getBody().unmask();
                    return true;
                }, 1000);
    
            }
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="proot" runat="server">
            <Content>
                <ext:TextField ID="txtFld" runat="server">
                    <Listeners>
                        <Blur Handler="MaskAndCalculate()" />
                    </Listeners>
                </ext:TextField>
                <ext:Container ID="Container1" runat="server">
                    <Items>
                        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                            <Store>
                                <ext:Store ID="Store1" runat="server">
                                    <Reader>
                                        <ext:JsonReader>
                                        </ext:JsonReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column DataIndex="tint" Header="tint">
                                        <Editor>
                                            <ext:TextField ID="txtTint" runat="server" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:Column DataIndex="tstring" Header="tstring">
                                        <Editor>
                                            <ext:TextField ID="txtString" runat="server" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:Column DataIndex="tdatetime" Header="tdatetime">
                                        <Editor>
                                            <ext:DateField ID="dtDateTime" runat="server" />
                                        </Editor>
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:CheckboxSelectionModel ID="rsmPI" SingleSelect="false" runat="server">
                                </ext:CheckboxSelectionModel>
                            </SelectionModel>
                            <Plugins>
                                <ext:GridPanelMaintainScrollPositionOnRefresh ID="GridPanelMaintainScrollPositionOnRefresh1"
                                    runat="server">
                                </ext:GridPanelMaintainScrollPositionOnRefresh>
                                <ext:GridFilters ID="GridFilters1" runat="server">
                                    <Filters>
                                        <ext:StringFilter DataIndex="tint" />
                                        <ext:NumericFilter DataIndex="tstring" />
                                        <ext:DateFilter DataIndex="tdatetime" />
                                    </Filters>
                                </ext:GridFilters>
                            </Plugins>
                        </ext:GridPanel>
                    </Items>
                </ext:Container>
            </Content>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 02, 2012 at 8:21 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by speedstepmem3 View Post
    1.When I press the tab key faster when the grid is in edit mode, The focus gets navigated to the controls outside the grid
    I was unable to reproduce. What Ext.NET sources do you use? We have fixed such issue, please update from SVN and re-test.

    Quote Originally Posted by speedstepmem3 View Post
    2. When the datefield gets edited it does not show the value present in cell, hence after it leaves the cell it becomes empty
    Please keep one issue per thread. So, please start a new thread.
  3. #3
    We use Ext 1.0, You can simulate by holding the tab key. If we need to resolve this in Ext 1.0 what are the steps should be taken?
  4. #4
    Don't you want to update to Ext.NET 1.2? Fairly many bugs has been fixed there.
  5. #5
    Quote Originally Posted by Daniil View Post
    Don't you want to update to Ext.NET 1.2? Fairly many bugs has been fixed there.
    We are ready to update, But the thing is we are having our application at out client place, He reported this bug, So If we are gonna port

    Will it be a dll change alone or we need to make code changes??,
    For ext 1.0 we changed ajaxevents to direct events and much more.. Kindly let me know how to approach this update
  6. #6

    1.2 also same bug

    I changed the dll to latest, I can still see that the focus gets out of the grid. kindly use the posted code above, and double click the first cell and press and hold the tab key. you can see a loading message, which is the blur event of the textfield indicated that the focus went to that text field.
  7. #7
    Quote Originally Posted by speedstepmem3 View Post
    Will it be a dll change alone or we need to make code changes??,
    For ext 1.0 we changed ajaxevents to direct events and much more.. Kindly let me know how to approach this update
    There are mo so many changes between v1.0 and v1.2. There are mainly bug fixes. You can always look at the CHANGELOG.txt.
  8. #8
    Quote Originally Posted by speedstepmem3 View Post
    I changed the dll to latest, I can still see that the focus gets out of the grid. kindly use the posted code above, and double click the first cell and press and hold the tab key. you can see a loading message, which is the blur event of the textfield indicated that the focus went to that text field.
    I still can't to reproduce with the latest Ext.NET sources from SVN.

    I will try with v1.2.

    What a browser do you test with?
  9. #9
    Finally, I have reproduced the issue in IE8 and IE7.

    Unfortunately, I'm not sure we can provide a full fix for that problem, because it comes from ExtJS and related to IE browser, to be more precisely, to its engine which is really slow. At least, I was unable to reproduce the problem in IE9, FireFox and Chrome.

    For now, I can suggest the following workaround to decrease this bug appearances. I will try to implement a better fix.

    JavaScript
    <script type="text/javascript">
        var myOnEditorKey = function (field, e) {
            var k = e.getKey(), newCell, g = this.grid, last = g.lastEdit, ed = g.activeEditor, shift = e.shiftKey, ae, last, r, c;
            if (k == e.TAB) {
                e.stopEvent();
                if (shift) {
                    newCell = g.walkCells(ed.row, ed.col - 1, -1, this.acceptsNav, this);
                } else {
                    newCell = g.walkCells(ed.row, ed.col + 1, 1, this.acceptsNav, this);
                }
            } else if (k == e.ENTER) {
                if (this.moveEditorOnEnter !== false) {
                    if (shift) {
                        newCell = g.walkCells(last.row - 1, last.col, -1, this.acceptsNav, this);
                    } else {
                        newCell = g.walkCells(last.row + 1, last.col, 1, this.acceptsNav, this);
                    }
                }
            }
            if (newCell) {
                r = newCell[0];
                c = newCell[1];
                this.onEditorSelect(r, last.row);
                if (g.isEditor && g.editing) {
                    ae = g.activeEditor;
                    if (ae && ae.field.triggerBlur) {
                        ae.field.triggerBlur();
                    }
                }
                g.startEditing(r, c);
            }
        };
    </script>
    HTML Markup
    <ext:GridPanel runat="server">
        ...
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" />
        </SelectionModel>
        <Listeners>
            <Render Handler="this.getSelectionModel().onEditorKey = myOnEditorKey;" />
        </Listeners>
    </ext:GridPanel>
    Last edited by Daniil; Dec 27, 2011 at 12:35 PM.
  10. #10
    Thanks, But it still appears even after adding this script , and in fire fox also there is a problem. attached is the screen shot in firefox 7.0.1., Also I can reproduce in IE 9. In realtime when the user tries to navigate to say 15th row after editing the first row, what he does is pressing the tab key very fast some time he just press and holds the tab key. when this happens, we show the grid in a window, the focus goes outside the window to some control in the parent page. The application requires fast data entry and editing thats why we end up with Ext.NET. Is there any solution we can try to avoid this issue.

    Please note that it occurs in IE9 and firefox also
    Attached Thumbnails firefox.png  
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to update all updated grid info in Editable Grid?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 06, 2011, 3:56 PM
  2. [CLOSED] Tab navigation issue in Editable GridPane
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 19, 2011, 12:48 PM
  3. Replies: 1
    Last Post: Jul 21, 2011, 5:38 PM
  4. Replies: 1
    Last Post: Jun 24, 2011, 12:18 PM
  5. Populating a grid on formpanel navigation
    By Kamal in forum 1.x Help
    Replies: 0
    Last Post: Jan 10, 2010, 11:25 AM

Tags for this Thread

Posting Permissions