Undefined value after change groupfield in grid panel grouping summary

  1. #1

    Undefined value after change groupfield in grid panel grouping summary

    Hi,

    In a local or remote grouping summary, after changing the groupfield (click in header of any column > group by this field) for a field that has been grouped, the summary values are now undefined.

    For example: In the GroupSummary example: https://examples3.ext.net/#/GridPane...oupingSummary/

    I changed:
     HideGroupedHeader = false
    and
    EnableGroupingMenu  = true
    to allow the changing of the grouping field.

    The default grouping field is Name. If I change the GroupField to Rate(click in header of column Rate > group by this field), the value of the summary rows appears correctly.

    If I change the GroupField to Estimate, the value of the summary rows appears correctly.

    But if I change the GroupField to Rate again, the summary rows shows wrong values. (See the print)

    Click image for larger version. 

Name:	bug.JPG 
Views:	67 
Size:	65.4 KB 
ID:	24026

    I noticed the values of the summary rows are undefined.

    Is there any way to refresh these summary lines after clicking on the group by this field option?

    Code used:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new List<Project> 
             { 
                new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
                new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
                new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
                new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, new DateTime(2007, 06, 29)),
                new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, new DateTime(2007, 07, 01)),
                new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, new DateTime(2007, 07, 03)),
                new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, new DateTime(2007, 07, 04)),
                new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, new DateTime(2007, 07, 05)),
                new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, new DateTime(2007, 07, 06)),
                new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, new DateTime(2007, 07, 01)),
                new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, new DateTime(2007, 07, 02)),
                new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, new DateTime(2007, 07, 05)),
                new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, new DateTime(2007, 07, 05)),
                new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, new DateTime(2007, 07, 06)),
                new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, new DateTime(2007, 07, 11)),
                new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, new DateTime(2007, 07, 15))
             };
    
            this.Store1.DataBind();
        }
    
        public class Project
        {
            public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
            {
                this.ProjectID = projectId;
                this.Name = name;
                this.TaskID = taskId;
                this.Description = description;
                this.Estimate = estimate;
                this.Rate = rate;
                this.Due = due;
            }
    
            public int ProjectID { get; set; }
            public string Name { get;set; }
            public int TaskID { get; set; }
            public string Description { get;set; }
            public int Estimate { get;set; }
            public double Rate { get; set; }
            public double Cost { get; set; }
            public DateTime Due { get; set; }
        }
    </script>
    
    <html>
    <head id="Head1" runat="server">
        <title>GroupingSummary Plugin - Ext.NET Examples</title>
        
        <link href="/resources/css/examples.css" rel="stylesheet" />
       
        <style>
            .x-grid-body .x-grid-cell-Cost {
                background-color : #f1f2f4;
            }
             
            .x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
                background-color : #e1e2e4;
            }    
    
            .task .x-grid-cell-inner {
                padding-left: 15px;
            }
    
            .x-grid-row-summary .x-grid-cell-inner {
                font-weight: bold;
                font-size: 11px;
                background-color : #f1f2f4;
            } 
        </style>
    
        <script>
            var totalCost = function (records) {
                var i = 0,
                    length = records.length,
                    total = 0,
                    record;
    
                for (; i < length; ++i) {
                    record = records[i];
                    total += record.get('Estimate') * record.get('Rate');
                }
                return total;
            };
        </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <h1>Group Summary Plugin</h1>
            <p>Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.</p>
    
            <ext:ResourceManager ID="ResourceManager1" runat="server"/>
            
            <ext:Store ID="Store1" runat="server" GroupField="Name">
                <Sorters>
                    <ext:DataSorter Property="Due" Direction="ASC" />
                </Sorters>
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                        <Fields>
                            <ext:ModelField Name="ProjectID" />
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="TaskID" />
                            <ext:ModelField Name="Description" />
                            <ext:ModelField Name="Estimate" Type="Int" />
                            <ext:ModelField Name="Rate" Type="Float" />
                            <ext:ModelField Name="Cost" Type="Float" />
                            <ext:ModelField Name="Due" Type="Date" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Frame="true"
                StoreID="Store1"
                Title="Sponsored Projects" 
                Collapsible="true"
                AnimCollapse="false"
                Icon="ApplicationViewColumns"
                Width="800"
                Height="450">
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1"                        
                            runat="server"
                            TdCls="task"
                            Text="Task"                       
                            Sortable="true"
                            DataIndex="Description"
                            Hideable="false"
                            SummaryType="Count"
                            Flex="1">
                            <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />                            
                        </ext:Column>
                         
                        <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="20" />
                         
                        <ext:DateColumn ID="DateColumn1"
                            runat="server"
                            Text="Due Date"
                            Sortable="true"
                            DataIndex="Due"
                            SummaryType="Max"
                            Format="MM/dd/yyyy">
                            <Editor>
                                <ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
                            </Editor>
                        </ext:DateColumn>
     
                        <ext:Column ID="Column3"
                            runat="server"  
                            Width="75"
                            Text="Estimate"
                            Sortable="true"
                            DataIndex="Estimate"
                            SummaryType="Sum">
                            <Renderer Handler="return value +' hours';" />
                            <Editor>
                                <ext:NumberField ID="NumberField1" 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="0" 
                                    StyleSpec="text-align:left" />
                            </Editor>
                        </ext:Column>
                         
                        <ext:Column ID="Column4"
                            runat="server"
                            Width="75"
                            Text="Rate"
                            Sortable="true"
                            DataIndex="Rate"
                            SummaryType="Average">
                            <Renderer Format="UsMoney" />
                            <Editor>
                                <ext:NumberField ID="NumberField2" 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="0" 
                                    StyleSpec="text-align:left" />
                            </Editor>
                        </ext:Column>
                         
                        <ext:Column
                            runat="server"
                            Width="75"
                            ID="Cost"
                            Text="Cost"
                            Sortable="false"
                            Groupable="false"
                            DataIndex="Cost"
                            CustomSummaryType="totalCost">
                            <Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
                            <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                        </ext:Column>
                    </Columns>                
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
                </View>
                <Features>               
                    <ext:GroupingSummary 
                        ID="GroupingSummary1" 
                        runat="server" 
                        GroupHeaderTplString="{name}" 
                        HideGroupedHeader="false" 
                        EnableGroupingMenu="true" />
                </Features>     
                
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" 
                                runat="server" 
                                Text="Toggle" 
                                ToolTip="Toggle the visibility of summary row"
                                EnableToggle="true"
                                Pressed="true"
                                Handler="#{GroupingSummary1}.toggleSummaryRow(!#{GroupingSummary1}.showSummaryRow);
                                         #{GroupingSummary1}.view.refresh();" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
        </form>
      </body>
    </html>
  2. #2
    Hello, welcome to the forum and thank you for the report.

    It is a bug, you can fix it by adding the following javascript to the page:

    Ext.define('Ext.override.grid.feature.AbstractSummary', {
        override: 'Ext.grid.feature.GroupingSummary',
        populateRecord: function (group, groupInfo, remoteData) {
            ++group.generation;
            return this.callParent(arguments);
        }
    });
    A related explanation can be found here:
    http://stackoverflow.com/questions/2...eshed-re-drawn

    Hope it helps.
  3. #3
    Hello,

    Just to let you know, this has already been fixed in the latest build, which will be available in the forthcoming release.


    Hope it helps.

Similar Threads

  1. [CLOSED] Grid Panel Grouping - change in JS
    By Z in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 30, 2015, 1:58 PM
  2. Grouping summary and summary in one grid
    By PetrSnobelt in forum 2.x Help
    Replies: 1
    Last Post: Apr 16, 2013, 9:59 AM
  3. Add a row to Grouping Summary grid
    By neostek in forum 1.x Help
    Replies: 8
    Last Post: Aug 07, 2012, 5:19 AM
  4. [CLOSED] Use Grid Grouping without sorting by the groupField ?
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 08, 2011, 7:17 PM
  5. Replies: 1
    Last Post: Sep 10, 2010, 9:57 AM

Posting Permissions