[FIXED] [#826] [3.2.0] CellEditor in RowExpander not behaving as in parent GridPanel

**Argenta** · Jul 04, 2015, 7:27 AM

I have a GridPanel with the RowExpander plugin.

The expanded row contains another GridPanel. Both GridPanels have the CellEditing plugin:

.Plugins(Html.X().CellEditing().ClicksToEdit(1).Listeners(ls => ls.Edit.Fn = "edit"))

In the parent GridPanel the Edit listener is not invoked until I leave the cell.

In the expanded row the Edit listener is invoked whenever I make a second click in the cell.

For example I have a NumberField in one cell. The first click enters Edit mode but when I double click to select the whole value it invokes the Edit listener and the mouse cursor jumps to the top of the GridPanel.

This is more frustrating when I try to edit another cell which has a ComboBox. The first click displays the ComboBox and the second click to display the dropdown invokes the Edit listener and the mouse cursor jumps to the top of the GridPanel.

The RowEditing plugin works OK but it's not nearly as convenient for the user. I have a tight deadline with a customer so I need to resolve this.

I'm using version 3.1.0.23500.

**fabricio.murta** · Jul 05, 2015, 3:04 AM

Hello @Argenta,

Given your urgency in the matter, I'd better advice you about providing a simple test case illustrating the problem you are having there, else it would be much harder for us to help you to pinpoint and fix the problem.

If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Forum Guidelines For Posting New Topics
- More information required

What you're trying is something between these two examples:
1. Editable GridPanel With Save To [DirectMethod]
2. RowExpander Plugin with FormPanel Detail

If you haven't looked at them yet, that's a good starting point.

Hope this helps!

**Argenta** · Jul 05, 2015, 2:31 PM

Hi Fabricio

This demonstrates the issue. Let me know if you need any clarification.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.GridPanel1.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Name = "Bill Foot",  
                    Salary = 37000
                },
                new 
                { 
                    Name = "Bill Little",
                    Salary = 53000
                }
            };
            this.GridPanel2.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Quantity = 100, 
                    Location = "A01A"
                },
                new 
                { 
                    Quantity = 100, 
                    Location = "A02A"
                }
            };
        }
    }
</script>

<!DOCTYPE html>
    
<html>
<head id="Head1" runat="server">
    <title>CellEditor in RowExpander not behaving as in parent GridPanel</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    
    <ext:XScript ID="XScript1" runat="server">
        <script>
        </script>
    </ext:XScript>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>CellEditor in RowExpander not behaving as in parent GridPanel</h1>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"
            Width="300"
            Height="400"
            Frame="true"
            Title="Employees">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Employee">
                            <Fields>
                                <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:CellEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" SaveHandler="validateSave" />
                <ext:RowExpander ID="RowExpander1" runat="server">
                    <Component>
                        <ext:GridPanel ID="GridPanel2" runat="server" Width="250" Height="200" Frame="true" Title="Pallets">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" Name="Employee">
                                            <Fields>
                                                <ext:ModelField Name="quantity" ServerMapping="Quantity" Type="Int" />
                                                <ext:ModelField Name="location" ServerMapping="Location" Type="String" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column2" runat="server"                         
                                        Text="Location" 
                                        DataIndex="location" 
                                        Flex ="1">
                                        <Editor>
                                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:NumberColumn ID="NumberColumn2"
                                        runat="server"
                                        Text="Quantity" 
                                        DataIndex="quantity">
                                        <Editor>
                                            <ext:NumberField ID="NumberField2" 
                                                runat="server" 
                                                AllowBlank="false" 
                                                MinValue="1" 
                                                MaxValue="150000" 
                                                />
                                        </Editor>
                                    </ext:NumberColumn>
                                </Columns>
                            </ColumnModel>
                            <Plugins>
                                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" AutoCancel="false" SaveHandler="validateSave" />
                            </Plugins>
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>                       
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server"                         
                        Text="Name" 
                        DataIndex="name" 
                        Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:NumberColumn ID="NumberColumn1"
                        runat="server"
                        Text="Salary" 
                        DataIndex="salary" 
                        Format="$0,0">
                        <Editor>
                            <ext:NumberField ID="NumberField1" 
                                runat="server" 
                                AllowBlank="false" 
                                MinValue="1" 
                                MaxValue="150000" 
                                />
                        </Editor>
                    </ext:NumberColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>  
</body>
</html>

**fabricio.murta** · Jul 05, 2015, 11:08 PM

Hello @Argenta!

Just to provide you some feedback, I've been working with that since early today. Thanks for the straightforward sample, I was able to reproduce the issue and had some progress as pinpointing the cause of it.

Unfortunately, I couldn't yet find the solution for the problem, but will keep working on this and will notify you once this is ready.

The issue is registered on github issue #826.

I hope to come back with good news very soon.

**fabricio.murta** · Jul 06, 2015, 12:42 AM

Hello @Argenta!

Good news, you will be able to have this particular code running if you add the following code to your page:

    <script>
        Ext.define('Ext.event.Event_override', {
            override: 'Ext.event.Event',
            getTarget: function (selector, maxDepth, returnEl) {
                if (this.view && this.view.editingPlugin) maxDepth = 12;
                return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
            }
        });
    </script>

This should not break other stuff if you have complex controls on your same page.

So, the code you provided would become this:

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.GridPanel1.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Name = "Bill Foot",  
                    Salary = 37000
                },
                new 
                { 
                    Name = "Bill Little",
                    Salary = 53000
                }
            };
            this.GridPanel2.GetStore().DataSource = new List<object>
            {
                new 
                { 
                    Quantity = 100, 
                    Location = "A01A"
                },
                new 
                { 
                    Quantity = 100, 
                    Location = "A02A"
                }
            };
        }
    }
</script>

<!DOCTYPE html>
    
<html>
<head id="Head1" runat="server">
    <title>CellEditor in RowExpander not behaving as in parent GridPanel</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    
    <ext:XScript ID="XScript1" runat="server">
        <script>
        </script>
    </ext:XScript>
    <script>
        Ext.define('Ext.event.Event_override', {
            override: 'Ext.event.Event',
            getTarget: function (selector, maxDepth, returnEl) {
                if (this.view && this.view.editingPlugin) maxDepth = 12;
                return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
            }
        });
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>CellEditor in RowExpander not behaving as in parent GridPanel</h1>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"
            Width="300"
            Height="400"
            Frame="true"
            Title="Employees">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Employee">
                            <Fields>
                                <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:CellEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false" SaveHandler="validateSave" />
                <ext:RowExpander ID="RowExpander1" runat="server">
                    <Component>
                        <ext:GridPanel ID="GridPanel2" runat="server" Width="250" Height="200" Frame="true" Title="Pallets">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" Name="Employee">
                                            <Fields>
                                                <ext:ModelField Name="quantity" ServerMapping="Quantity" Type="Int" />
                                                <ext:ModelField Name="location" ServerMapping="Location" Type="String" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="Column2" runat="server"                         
                                        Text="Location" 
                                        DataIndex="location" 
                                        Flex ="1">
                                        <Editor>
                                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:NumberColumn ID="NumberColumn2"
                                        runat="server"
                                        Text="Quantity" 
                                        DataIndex="quantity">
                                        <Editor>
                                            <ext:NumberField ID="NumberField2" 
                                                runat="server" 
                                                AllowBlank="false" 
                                                MinValue="1" 
                                                MaxValue="150000" 
                                                />
                                        </Editor>
                                    </ext:NumberColumn>
                                </Columns>
                            </ColumnModel>
                            <Plugins>
                                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" AutoCancel="false" SaveHandler="validateSave" />
                            </Plugins>
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>                       
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server"                         
                        Text="Name" 
                        DataIndex="name" 
                        Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                        </Editor>
                    </ext:Column>
                    <ext:NumberColumn ID="NumberColumn1"
                        runat="server"
                        Text="Salary" 
                        DataIndex="salary" 
                        Format="$0,0">
                        <Editor>
                            <ext:NumberField ID="NumberField1" 
                                runat="server" 
                                AllowBlank="false" 
                                MinValue="1" 
                                MaxValue="150000" 
                                />
                        </Editor>
                    </ext:NumberColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>  
</body>
</html>

I hope this helps!

**Argenta** · Jul 06, 2015, 7:37 AM

Brilliant!!

Thanks Fabricio

That's fixed it. Thanks very much for your prompt response.

Presumably that will be fixed so that we don't need that override in future?

Jeff

**Daniil** · Jul 06, 2015, 3:14 PM

The override also fixes this:
http://forums.ext.net/showthread.php?59569

**Argenta** · Jul 06, 2015, 6:34 PM

Hi Daniil

Yes. Maybe I should have linked the threads when I raised the second one. The first one was raised by a colleague but didn't really provide an answer. When I looked at it in more detail I realised there was a problem with the events. Based on that Fabricio did a good job of tracking it down!

Thanks again

Jeff

**fabricio.murta** · Jul 06, 2015, 7:43 PM

Argenta,

Presumably that will be fixed so that we don't need that override in future?

Yes, we'll get this fixed on subsequent releases of Ext.NET. Just that we probably are not going to fix this exactly as the override does. We are going to discuss this issue in detail before committing the fix to the code, after analysing possible drawbacks or alternative ways to better fix it.

Although the fix seems very simple and short, this is a function that runs too frequently in any Ext.NET code, so adding overhead here is not a good idea if it can be avoided otherwise.

**Daniil** · Jul 08, 2015, 12:04 PM

The issue has been fixed in the revision #6465 (trunk). It goes to the upcoming Ext.NET 3.2.0 release.

The fix is added on the level of Ext.view.View. There was already a check to make an outer GridPanel ignoring events from its inner GridPanel, but it was not enough for this scenario. So, I added an additional check and it appears to behave fine. Please let me know if you find a scenario where it breaks.

@Argenta, thank you very much for the report!

Thread: [FIXED] [#826] [3.2.0] CellEditor in RowExpander not behaving as in parent GridPanel

Thread Tools

Search Thread

Display

[FIXED] [#826] [3.2.0] CellEditor in RowExpander not behaving as in parent GridPanel

Similar Threads

[OPEN] [#236] [2.2] Bug on RowExpander

[CLOSED] GridPanel Next CellEditor Status

[CLOSED] open window out of its parent

Open window out the parent

[CLOSED] Open window in parent

Posting Permissions

Sitemap

Downloads

Resources

Thread: [FIXED] [#826] [3.2.0] CellEditor in RowExpander not behaving as in parent GridPanel

[FIXED] [#826] [3.2.0] CellEditor in RowExpander not behaving as in parent GridPanel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us