[CLOSED] Issue with validate change on nested grid panel

  1. #1

    [CLOSED] Issue with validate change on nested grid panel

    Hi,

    We are having an issue cell editing plugin inside a row expander, specifically the the validateedit listener, it is being called after the edit is made and not before the edit is made, also when the edit is made the incorrect values for the validation context are passed, this is, the newvalue and old value are always the same.

    The issue is present in Ext 4.1, it was working correctly in 4.0

    Here is a sample to reproduce the problem, to reproduce, add rows using the button on the panel, then expand the component and add rows to the inner grid, when try to edit the problem will be reproduced


    <%@ Page Language="C#" %>
    
    <script runat="server">
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Triton" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="RowExpander"
            Collapsible="true"
            AnimCollapse="true"
            Icon="Table"
            Width="800"
            Height="600">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Add record to grid" Handler="var grid = this.up('grid'); grid.getStore().add(new (grid.getStore().getModel())());" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Prop1" Type="String" />
                                <ext:ModelField Name="Prop2" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" DataIndex="Prop1" Flex="1" />
                    <ext:Column runat="server" DataIndex="Prop2" Flex="10"/>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander>
                    <Component>
                        <ext:GridPanel
                            ID="GridPanel2"
                            runat="server"
                            Title="RowExpanded"
                            Icon="Table">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button runat="server" Text="Add record to grid" Handler="var grid = this.up('grid'); grid.getStore().add(new (grid.getStore().getModel())());" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store runat="server">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="Prop3" Type="Date" />
                                                <ext:ModelField Name="Prop4" Type="Date" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column runat="server" DataIndex="Prop3">
                                        <Editor>
                                            <ext:DateField runat="server" />
                                        </Editor>
                                    </ext:Column>
                                    <ext:Column runat="server" DataIndex="Prop4">
                                        <Editor>
                                            <ext:DateField runat="server" />
                                        </Editor>
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <Plugins>
                                <ext:CellEditing>
                                    <Listeners>
                                        
                                        <ValidateEdit Handler="alert('should be called after edit, not before'); return true;" />
                                    </Listeners>
                                </ext:CellEditing>
                            </Plugins>
                        </ext:GridPanel>
                    </Component>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    
    </body>
    </html>
    Regards.
    Last edited by REB; Jun 04, 2016 at 9:20 PM. Reason: Removed property from row expander not related to issue reported
  2. #2
    Hello @REB!

    We will investigate the issue and return to you as soon as we can! Thanks for reporting!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio, any updates?
  4. #4
    Hello @REB! Apologies for the long long delay, and thank you very much for the bump on the thread!

    I'm still not really sure why this ended up on ExtJS, but probably it fixed some sort of situation by "completing" an edit first thing. But it caused the validation event to be triggered nevertheless.

    I believe that best would be, for now, to just return soon if the event is triggered before edit (if the edited value is the same of the original one, for example), but you can use this to prevent triggering the early edit validation event:

    Ext.define('Ext.Editor', {
        override: 'Ext.Editor',
        startEdit: function (el, value, doFocus) {
            var me = this,
                field = me.field,
                dom, ownerCt, renderTo;
    
            me.boundEl = Ext.get(el);
            dom = me.boundEl.dom;
            if (me.useBoundValue && !Ext.isDefined(value)) {
                value = Ext.String.trim(dom.textContent || dom.innerText || dom.innerHTML);
            }
            if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
    
                Ext.suspendLayouts();
                if (!me.rendered) {
                    ownerCt = me.ownerCt;
                    renderTo = me.renderTo || (ownerCt && ownerCt.getEl()) || Ext.getBody();
                    Ext.fly(renderTo).position();
                    me.renderTo = renderTo;
                }
                me.startValue = value;
                me.show();
                me.realign(true);
    
                field.suspendEvents();
                field.setValue(value);
                field.resetOriginalValue();
                field.resumeEvents();
                if (doFocus !== false) {
                    field.focus(field.selectOnFocus ? true : [
                        Number.MAX_VALUE
                    ]);
                }
                if (field.autoSize) {
                    field.autoSize();
                }
                Ext.resumeLayouts(true);
                me.toggleBoundEl(false);
                me.editing = true;
            }
        }
    });
    But this early call could catch a situation where the user cancels the editor component, making it not call the validation for some reason. I'm not really sure which bug this could have fixed in ExtJS when they added this call.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 9
    Last Post: Jun 17, 2016, 1:16 PM
  2. Replies: 6
    Last Post: May 18, 2015, 7:58 PM
  3. Replies: 1
    Last Post: Feb 23, 2015, 6:41 PM
  4. Replies: 6
    Last Post: Oct 15, 2012, 6:20 AM
  5. Replies: 0
    Last Post: Nov 08, 2010, 9:20 AM

Posting Permissions