[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.

Code:

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)

Code:

<%@ 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>

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:

Code:

<%@ 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.

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.

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:

Code:

<%@ 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>

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:

Code:

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!

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:

Code:

Ext.defer(function () { App.GridEditor.startEdit(recordIndex, 0); }, 250);

Other way is adding the delay to the listener itself instead with:

Code:

<Command Fn="editCommand" Delay="250"></Command>

This will avoid the "fight for focus" which the button ends up winning by default. Hope this helps!

Adding a Delay works perfectly! Thank you.

Hello! Glad it helps, thanks for the feedback, we really appreciate it!