[CLOSED] Grid Group dropdown "Show In Groups" implementation

  1. #1

    [CLOSED] Grid Group dropdown "Show In Groups" implementation

    Does it make sense for the "Show In Groups" checkbox in the column dropdown to be disabled after unchecking it and coming off the dropdown, then looking at the dropdown again?

    You are able to uncheck and check the box as long as the dropdown doesn't disappear. I assume in the background it knows the last grouped column because when you uncheck "Show In Groups" the column is not added back to the grid.

    Just a thought ...

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
                return;
    
            BuildStore();
    
        }
    
        private void BuildStore()
        {
            string seperator1 = " &raquo; ";
            string seperator2 = " | ";
    
            string premiumHelp2x = "<a href='http://forums.ext.net/forum.php' Target='_blank'>Ext.Net Forums</a>" + seperator1 +
                                   "<a href='http://forums.ext.net/forumdisplay.php?13'>Premium</a>" + seperator1 +
                                   "<a href='http://forums.ext.net/forumdisplay.php?17-2'>2.x Premium Help</a>";
    
            List<object> data = new List<object> 
                { 
                    new { Id = 53271, DateCreated = DateTime.Parse("2/5/2015 11:50"), Forum = premiumHelp2x, UrlTitle ="<a href='http://forums.ext.net/showthread.php?53271'>Grid Group: Show full datetime but group by month day year</a>", User="cwolcott", Status="Open"},
                    new { Id = 40901, DateCreated = DateTime.Parse("8/5/2014 14:20"), Forum = premiumHelp2x,  UrlTitle="<a href='http://forums.ext.net/showthread.php?40901'>[CLOSED] Field focus problem</a>", User="matrixwebtech", Status="Closed" },
                };
    
            this.GridStore.DataSource = data;
            this.GridStore.DataBind();
        }
    </script>
    <head runat="server">
        <title>Grid Grouping Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel" runat="server" ClientIDMode="Static" >
            <Store>
                <ext:Store ID="GridStore" runat="server" GroupField="Forum">
                    <Model>
                        <ext:Model runat="server" IDProperty="Id">
                            <Fields>
                                <ext:ModelField Name="Id" />
                                <ext:ModelField Name="DateCreated" Type="Date" />
                                <ext:ModelField Name="Forum" Type="String" />
                                <ext:ModelField Name="UrlTitle" Type="String" />
                                <ext:ModelField Name="User" Type="String" />
                                <ext:ModelField Name="Status" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Groupers>
                    </Groupers>
                    <Listeners>
                        <GroupChange Handler="var isGrouped = this.isGrouped(); #{CartEcBtn}.setDisabled(!isGrouped);" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" Groupable="false" />
                    <ext:DateColumn runat="server" Text="Created" DataIndex="DateCreated" Format="Y-MM-dd hh:mm:ss a"
                        Width="170" />
                    <ext:Column runat="server" Text="User" DataIndex="User" Width="90" />
                    <ext:Column runat="server" Text="Status" DataIndex="Status" Width="60" />
                    <ext:Column runat="server" Text="Forum" DataIndex="Forum" Flex="1" />
                    <ext:Column runat="server" Text="Thread Title" DataIndex="UrlTitle" Flex="2" Groupable="false" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
            </SelectionModel>
            <Features>
                <ext:Grouping ID="GridGrouping" runat="server" StartCollapsed="false" HideGroupedHeader="true">
                    <GroupHeaderTpl runat="server">
                        <Html>
                            <tpl if="groupField === 'DateCreated'">
                                        {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                    </tpl>
                            <tpl if="groupField === 'Forum'">
                                        Forum: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                    </tpl>
                            <tpl if="groupField === 'User'">
                                        Creator: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                    </tpl>
                            <tpl if="groupField === 'Title'">
                                         Month Created: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                    </tpl>
                            <tpl if="groupField === 'Status'">
                                         Status: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
                                    </tpl>
                        </Html>
                    </GroupHeaderTpl>
                </ext:Grouping>
            </Features>
            <Listeners>
                <AfterRender Handler="#{GridGrouping}.expanded = true;" />
            </Listeners>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button ID="CartEcBtn" runat="server" Text="Expand/Collapse Groups" Icon="TableSort">
                            <Listeners>
                                <Click Handler="#{GridGrouping} [ #{GridGrouping}.expanded ? 'collapseAll' : 'expandAll'](); #{GridGrouping}.expanded = !#{GridGrouping}.expanded;" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by Daniil; Feb 12, 2015 at 10:43 AM. Reason: [CLOSED]
  2. #2
    Hello Chris Wolcott,

    You really have a point. When you check back the 'Show in Groups' menu option it should just re-apply the grouping.

    In fact, this was the behavior in ExtJS back to version 4.0.

    If you look this sencha 4.0.7 sample: Grouping Grid Example (v.4.0.7)
    You'll notice how it works as you suggested!

    But now, let's proceed in time, let's see the same sample to ExtJS 4.1.3: Grouping Grid Example (v4.1.3)
    Ops! It no longer allows us to uncheck Show in Groups, click out, and check back!..

    If you look for the same samples from 4.1.3 onwards, all them disable this checkbox once you uncheck it + click out, and you are bound to regroup by clicking the Group By This Field menu entry.

    This "memory" of which group was last probably was breaking some new feature and wasn't worth the effort to keep it, as
    a) It will do the same as clicking the column context menu and clicking Group By This Field
    b) It will re-group to the last (and not originally) grouped column.

    Although this does not specificly clarify your question, it shows that at least an attempt was made to have this behavior in the past, and sencha team decided not to maintain this behavior. I really hope that this information helps a bit for you to have an idea on why it does not work like it intuitively would.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I guess I can live with it. I will try to look through the code to see if I can find where it was changed (just curious). There is no mention in the Release Notes for Ext JS 4.1.0 RC 1.

    I was think about one quirk which is explain in a Sencha Forum Threads:

    Unchecking "Show in groups" when hideGroupedHeader : true doesn't show grouped column
  4. #4
    Yes, the forum link you sent describes the most perceiveable change between the two samples I linked to you.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Daniil,

    Any thought on how to perform the following.

    When I uncheck 'Show in Groups' can the column that was being used to group be shown back in the grid automatically? I think this is an oversight on ExtJs.
  6. #6
    Hi Chris,

    Please try this override:
    Ext.grid.feature.Grouping.override({
        onGroupToggleMenuItemClick: function (menuItem, checked) {
            this.callParent(arguments);
    
            if (this.hideGroupedHeader) {
                if (!checked) {
                    this.prunedHeader.show();
                    delete this.prunedHeader;
                } else {
                    this.pruneGroupedHeader();
                }
            }
        }
    });
  7. #7
    Works like a charm. Please close the thread.

Similar Threads

  1. Replies: 6
    Last Post: May 31, 2013, 3:04 AM
  2. Disabling "Group By This Field" menu
    By obroc17 in forum 1.x Help
    Replies: 1
    Last Post: May 28, 2012, 2:05 AM
  3. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  4. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  5. Replies: 2
    Last Post: May 14, 2011, 6:29 PM

Posting Permissions