[OPEN] [#1476] [4.2.0] GridPanel CellEditing error when Column has Command

  1. #1

    [OPEN] [#1476] [4.2.0] GridPanel CellEditing error when Column has Command

    When using the CellEditing plugin and editing a column in a grid that contains an ImageCommand, I am getting a javascript error and the edit fails. The error is below as well as a simple example to recreate the issue. Just try to edit the grid and you should see the error. If I remove the ImageCommand the cell editing works fine.

    Uncaught TypeError: Cannot read property 'tdCls' of null
        at constructor.cellCommandRenderer (ext.axd?v=4.2.0:15330)
        at constructor.renderer (ext.axd?v=4.2.0:4355)
        at Object.callback (ext.axd?v=4.2.0:5334)
        at constructor.handleUpdate (ext.axd?v=4.2.0:130021)
        at constructor.onUpdate (ext.axd?v=4.2.0:113941)
        at constructor.fire (ext.axd?v=4.2.0:11880)
        at constructor.doFireEvent (ext.axd?v=4.2.0:12476)
        at constructor.prototype.doFireEvent (ext.axd?v=4.2.0:35965)
        at constructor.fireEventArgs (ext.axd?v=4.2.0:12382)
        at constructor.fireEvent (ext.axd?v=4.2.0:12357)

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co"}
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="400" Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                            <Commands>
                                <ext:ImageCommand CommandName="Clear" Icon="Delete"></ext:ImageCommand>
                            </Commands>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing runat="server"></ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; May 12, 2017 at 6:18 PM.
  2. #2
    Hello, @tylert!

    Thanks for providing the test case. Editor and commands in the same column is not supported. You should be using the command in a separate column.

    Something like that:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co"}
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="400" Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:ImageCommandColumn runat="server" Width="80">
                            <Commands>
                                <ext:ImageCommand CommandName="Clear" Icon="Delete"></ext:ImageCommand>
                            </Commands>
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing runat="server"></ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    But we should either forbid using both in the same column or support them, not just let the error happen at run-time. And for this, we logged issue #1476 to decide on either approach and implement on Ext.NET.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks. We used them in the same column with no issue in Ext.NET 2.x, but we will just use separate columns for the commands like you suggested.
  4. #4
    I'm running into an issue when I have the ImageCommand as a separate column. I want to have a command that will initialize editing of the first column. When I click the command icon nothing happens. Can you see what I'm doing wrong in this example:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co"}
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <ext:XScript runat="server">
        <script type="text/javascript">
            var editCommand = function (column, command, record, recordIndex, cellIndex) {
                      #{GridEditor}.startEdit(record, 0);
            };
        </script>
            </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="400" Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:ImageCommandColumn runat="server">
                            <Commands>
                                <ext:ImageCommand CommandName="Edit" Icon="BugEdit"></ext:ImageCommand>
                            </Commands>
                            <Listeners>
                                <Command Fn ="editCommand"></Command>
                            </Listeners>
                        </ext:ImageCommandColumn>   
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing runat="server" ID="GridEditor"></ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hello @tylert!

    Well, if it worked back on 2.x I suspected there shouldn't be much before it works, so I gave it a try and it seems to work at least on your use case.

    I didn't went as down as to checking what else this could break, but in potential, it could.

    This override makes your (original) example work fine:

    Ext.define('Ext.view.Table', {
        override: 'Ext.view.Table',
        shouldUpdateCell: function (record, column, changedFieldNames) {
            return column.shouldUpdateCell(record, changedFieldNames) > 1 ? 1:0;
        }
    });
    I would advise against using it but it is there if that's really a trouble for you to create the new column. Let us know if this works for your real-world case without issues. Although the fix is not really this override, we could then apply a proper fix to a much bigger method that breaks due to this one returning something different than 1 or 0.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello @tylert!

    About your last code sample, I see there's a race condition happening there, that makes the icon steal the focus and dismiss the editor before it has even shown.

    To avert that, you can but add a small delay between the command image button click and the editor start.

    One way to achieve this is deferring the call to the editor starting command:

    Ext.defer(function () { App.GridEditor.startEdit(recordIndex, 0); }, 250);
    Other way is adding the delay to the listener itself instead with:

    <Command Fn="editCommand" Delay="250"></Command>
    This will avoid the "fight for focus" which the button ends up winning by default. Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Adding a Delay works perfectly! Thank you.
  8. #8
    Hello! Glad it helps, thanks for the feedback, we really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Mar 24, 2014, 7:03 AM
  2. [CLOSED] gridpanel - CellEditing causing javascript error
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 04, 2013, 5:44 AM
  3. Replies: 6
    Last Post: Jun 20, 2013, 1:25 PM
  4. GridPanel Column Command?
    By peter.campbell in forum 1.x Help
    Replies: 1
    Last Post: Apr 08, 2011, 9:13 AM
  5. [CLOSED] [1.0] Command Column in Grid causes jscript error
    By chrisbranson in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 28, 2010, 4:04 PM

Tags for this Thread

Posting Permissions