[FIXED] [#1687] Grouping expand button does not work when lock col enabled

  1. #1

    [FIXED] [#1687] Grouping expand button does not work when lock col enabled

    Hi, Using your demo, I can reproduce the issue:

    Unlock 1st column then group by Company Name, none of the expand(+) buttons is clickable.
    Please help!
    -Susan

     
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Locking Column Cell Editing - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            var CollapseAll = function () {
    
                App.Grouping1.collapseAll();
                App.Grouping1.expanded = false;
            };
    
    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            ColumnLines="true"
            Title="Locking Grid Column"
            Width="800"
            Height="350">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
    
                            </Fields>
                        </ext:Model>
                    </Model>
                     <Listeners>
                        <GroupChange Handler="CollapseAll();" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column
                        runat="server" 
                        Text="Company<br>Name"
                        DataIndex="company"
                        Width="200"
                        Locked="true"
                        Sortable="false">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
                        <Renderer Fn="pctChange" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
                        <Editor>
                            <ext:DateField runat="server" />
                        </Editor>
                    </ext:DateColumn>
                    <ext:Column
                        runat="server"
                        Text="Company Name"
                        DataIndex="company"
                        Width="200"
                        Sortable="false">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
                        <Renderer Fn="change" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
                        <Renderer Fn="pctChange" />
                        <Editor>
                            <ext:NumberField runat="server" />
                        </Editor>
                    </ext:Column>
    
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
                        <Editor>
                            <ext:DateField runat="server" />
                        </Editor>
                    </ext:DateColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel runat="server" />
            </SelectionModel>
            <View>
                    <ext:GridView runat="server">
                    </ext:GridView>
                </View>
            <Features>
               <ext:Grouping ID="Grouping1" runat="server"
                        HideGroupedHeader="false"
                        StartCollapsed="true"
                        GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
               />
            </Features>
             <Buttons>
                    <ext:Button
                        ID="btnToggleGroups"
                        runat="server"
                        Text="Expand/Collapse Groups"
                        Icon="TableSort"
                        Style="margin-left: 6px;">
                        <Listeners>
                            <Click Handler="#{Grouping1}[#{Grouping1}.expanded ? 'collapseAll' : 'expandAll'](); #{Grouping1}.expanded = !#{Grouping1}.expanded;" />
                        </Listeners>
                    </ext:Button>
            </Buttons>
            <Plugins>
                <ext:CellEditing runat="server" ClicksToEdit="1" />
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by fabricio.murta; Feb 03, 2020 at 2:36 PM.
  2. #2
    Hello, Susan!

    Looks like this is a bug introduced by Ext JS 6.5.0, which went out with Ext.NET 4.3.0, released around September 2017. We found the bug was reported still in June 2017 after that Sencha version was released, with no feedback from the company.

    We have logged the issue under #1687 in github, but at the moment no workaround could be found for the issue. It will be necessary to take a deeper look at this before a solution for the issue can be provided.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again, Susan!

    Can you try adding this script block to your page and let us know if the issue is properly addressed?

    Looking forward to your follow-up.

    Ext.define('gh1687', {
        override: 'Ext.grid.feature.Grouping',
        getMetaGroup: function (group) {
            var me = this,
                trySyncCollapseState = false,
                groupData, groupingContext, metaGroup;
    
            if (me.lockingPartner) {
                if (group.isModel || typeof group === 'string') {
                    groupData = me.getGroup(group);
                } else {
                    groupData = group;
                }
    
                if (groupData) {
                    groupingContext = groupData.$groupingContext || (groupData.$groupingContext = {});
                    if (!groupingContext[id]) trySyncCollapseState = true;
                }
            }
    
            metaGroup = me.callParent(arguments);
    
            // This means both 'me.lockingPartner' and 'groupingContext' are set.
            if (trySyncCollapseState) {
                // If the partner has already set this group's state
                if (groupingContext[me.lockingPartner.id]) {
                    // Map over the 'isCollapsed' bit.
                    metaGroup.isCollapsed = groupingContext[me.lockingPartner.id].isCollapsed;
                }
            }
    
            return metaGroup;
        }
    });
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi Fabricio,

    Thank you so much for your efforts! I need more testing on this, will get back to you later.
    Thanks again!
    -Susan
  5. #5
    Hello Susan!

    It seems I skipped this thread while reviewing features that went to Ext.NET 5.1.0! The fix suggested above looked good for as far as we could check, and we included it in Ext.NET 5.1.0. It is already available publicly. Let us know if anything is not working well with that fix, so we can address it.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Aug 07, 2018, 1:41 PM
  2. Replies: 15
    Last Post: Sep 07, 2016, 10:14 PM
  3. Replies: 3
    Last Post: May 06, 2016, 4:03 AM
  4. Replies: 3
    Last Post: Oct 16, 2015, 10:25 AM
  5. Replies: 8
    Last Post: Oct 12, 2015, 6:42 PM

Posting Permissions