[CLOSED] Combobox focus not proper in GridPanel

  1. #1

    [CLOSED] Combobox focus not proper in GridPanel

    Hi,

    In GridPanel when we add a new row and click on TAB key, focus is not moving cell by cell.

    Have a look at the sample code provided below:

    <%@ 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", "test" },
                    new object[] { "test", "test", "test" },
                    new object[] { "test", "test", "test" }
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v3 Example</title>
     
        <script>
            Ext.grid.plugin.CellEditing.override({
                startEdit: function (record, columnHeader) {
                    var currentEditor = this.getActiveEditor();
    
                    if (currentEditor && currentEditor.field && !currentEditor.field.isValid()) {
                        return;
                    }
    
                    this.callParent(arguments);
                }
            });
    
            Ext.Editor.override({
                completeEdit: function () {
                    if (!this.field.isValid()) {
                        return;
                    }
    
                    this.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />
     
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
                            <Editor>
                                <ext:ComboBox runat="server" ID="Combo1" QueryMode="Local" Editable="false"></ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Test 2" DataIndex="test2">
                            <Editor>
                                <ext:ComboBox runat="server" ID="ComboBox1" QueryMode="Local" Editable="false"></ext:ComboBox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" />
                </Plugins>
                <Buttons>
                    <ext:Button ID="btnAdd" runat="server" Text="Add">
                        <Listeners>
                            <Click Fn="AddRow" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnCancel" runat="server" Text="Cancel">
                        <Listeners>
                            <Click Fn="CancelChanges"></Click>
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
        </form>
        <script type="text/javascript">
            function AddRow() {
                var rowIndex = Sample.GridPanel1.store.getCount();
                Sample.GridPanel1.store.insert(rowIndex, {});
                Sample.GridPanel1.editingPlugin.startEdit(parseInt(rowIndex), 0);
            }
    
            function CancelChanges() {
                Sample.GridPanel1.getSelectionModel().deselectAll();
                Sample.Store1.rejectChanges();
                Sample.GridPanel1.getView().refresh();
            }
        </script>
    </body>
    </html>

    SCENARIOS:

    1) Click on Add, input some text in first column of new row.
    2) Click TAB.
    3) Instead of moving to next cell, the focus goes to the last column.
    Last edited by fabricio.murta; Feb 05, 2015 at 5:05 AM. Reason: [CLOSED]
  2. #2
    Hello, there were several things off on your sample.

    First: the startEdit override was outdated. Now it should return a true/false depending on the result of the run.
    Second: you have omitted the test3 field. Also, you made the control 3 be the same as control 2, which in turn caused some confusion and would ultimately render the grid unusable.
    Third: The second override (for completeEdit) seemed also off. I noticed there's a test for isValid() inside the current version so I believe it is no longer necessary (and breaks) overriding it. It was causing the field to appear on the top of the list in some situations.
    Fourth (I believe): you did not select an 'blank' validation for the combo boxes as well.

    I ended up changing your code into this:
    <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", "test" },
                    new object[] { "test", "test", "test" },
                    new object[] { "test", "test", "test" }
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v3 Example</title>
     
        <script>
            Ext.grid.plugin.CellEditing.override({
                startEdit: function (record, columnHeader) {
                    var retVal = this.callParent(arguments);
                    var currentEditor = this.getActiveEditor();
                    console.log(currentEditor);
                    if (currentEditor && currentEditor.field && !currentEditor.field.isValid()) 
                        currentEditor.field.markInvalid(Sample.TextField1.blankText);
                    return retVal;
                }
            });
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" SourceFormatting="true" ScriptMode="Debug" />
     
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
                            <Editor>
                                <ext:ComboBox runat="server" ID="Combo1" QueryMode="Local" Editable="false" AllowBlank="false">
                                    <Items>
                                        <ext:ListItem Text="col2 itm1" Value="c2i1" />
                                        <ext:ListItem Text="col2 itm2" Value="c2i2" />
                                        <ext:ListItem Text="col2 itm3" Value="c2i3" />
                                        <ext:ListItem Text="col2 itm4" Value="c2i4" />
                                    </Items>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Test 3" DataIndex="test3">
                            <Editor>
                                <ext:ComboBox runat="server" ID="ComboBox1" QueryMode="Local" Editable="false" AllowBlank="false">
                                    <Items>
                                        <ext:ListItem Text="col3 itm1" Value="c3i1" />
                                        <ext:ListItem Text="col3 itm2" Value="c3i2" />
                                    </Items>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
                <Buttons>
                    <ext:Button ID="btnAdd" runat="server" Text="Add">
                        <Listeners>
                            <Click Fn="AddRow" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnCancel" runat="server" Text="Cancel">
                        <Listeners>
                            <Click Fn="CancelChanges"></Click>
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
        </form>
        <script type="text/javascript">
            function AddRow() {
                var rowIndex = Sample.GridPanel1.store.getCount();
                Sample.GridPanel1.store.insert(rowIndex, {});
                Sample.GridPanel1.editingPlugin.startEdit(parseInt(rowIndex), 0);
            }
    
            function CancelChanges() {
                Sample.GridPanel1.getSelectionModel().deselectAll();
                Sample.Store1.rejectChanges();
                Sample.GridPanel1.getView().refresh();
            }
        </script>
    </body>
    </html>
    Well, but I might have thought it the wrong way. Can you check if that code fixes the issues you pointed?
    Last edited by fabricio.murta; Feb 03, 2015 at 5:50 AM.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Combobox focus not proper in GridPanel

    Hi fabricio.murta,

    The solution you gave is working fine now. Can mark this as closed.
    Thanks for your guidance!!!
  4. #4
    Glad I could help you here and in the other post! :)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jul 28, 2014, 12:32 PM
  2. Replies: 2
    Last Post: Feb 15, 2014, 12:05 AM
  3. [CLOSED] Proper Ext.encode() usage
    By vadym.f in forum 1.x Premium Help
    Replies: 6
    Last Post: Apr 19, 2013, 3:16 PM
  4. why ComboBox cant lost focus
    By ShengXQ in forum 2.x Help
    Replies: 3
    Last Post: Jan 10, 2013, 8:53 AM
  5. Replies: 7
    Last Post: Sep 26, 2012, 7:46 PM

Posting Permissions