[FIXED] [#919] [3.3] grouping has JS error when grouping value is blank

  1. #1

    [FIXED] [#919] [3.3] grouping has JS error when grouping value is blank

    Support,

    Notice that the first DataSourceRow has a blank name (line 12). This crashes v3.2.1.

    In v1.7, it created a header called "undefined" (also a bug) but not as bad.

    I would expect a grouped header with blank or "no header" shown.

    add the name and the page loads fine.

    Thanks,
    /Z.

    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new List<Project> 
             { 
                new Project(100, "", 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>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>Locking, Cell Editing Summary Grid - 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 showSummary = true;
    
    
            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;
            };
    
    
            var toggleSummary = function (b) {
                showSummary = !showSummary;
    
    
                var grid = b.up('gridpanel'),
                    view = grid.lockedGrid.getView();
    
    
                view.getFeature('group').toggleSummaryRow(showSummary);
                view.refresh();
                view = grid.normalGrid.getView();
                view.getFeature('group').toggleSummaryRow(showSummary);
                view.refresh();
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server"/>        
            
            <h1>Locking, Cell Editing Summary Grid Example</h1>
    
    
            <p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>
    
    
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Frame="true"            
                Title="Sponsored Projects"                         
                Icon="ApplicationViewColumns"
                Width="800"
                Height="450">
                <Store>
                    <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" Type="Int" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="TaskID" Type="Int" />
                                    <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>
                </Store>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1"                        
                            runat="server"
                            Locked="true"
                            TdCls="task"
                            Text="Task"                       
                            Sortable="true"
                            DataIndex="Description"
                            Hideable="false"
                            SummaryType="Count"
                            Width="300">
                            <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />                            
                        </ext:Column>
                         
                        <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                         
                        <ext:DateColumn ID="DateColumn1"
                            runat="server"
                            Width="130"
                            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="130"
                            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="130"
                            Text="Rate"
                            Sortable="true"
                            DataIndex="Rate"
                            SummaryType="Average">
                            <Renderer Format="UsMoney" />
                            <SummaryRenderer Fn="Ext.util.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="130"
                            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>           
                <Features>               
                    <ext:GroupingSummary 
                        ID="group" 
                        runat="server" 
                        GroupHeaderTplString="{name}" 
                        HideGroupedHeader="true" 
                        EnableGroupingMenu="false" 
                        />                   
                </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">
                                <Listeners>
                                    <Click Fn="toggleSummary" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <SelectionModel>
                    <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>
    Last edited by Daniil; Oct 16, 2015 at 10:26 AM. Reason: [FIXED] [#919] [3.3]
  2. #2
    Hi @Z,

    Thank you for the report!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/919

    Please try this fix:
    Ext.grid.feature.Grouping.override({
        // Overridden because of #919
        getMetaGroup: function (group) {
            var metaGroupCache = this.metaGroupCache || this.createCache(),
                key,
                metaGroup;
    
            if (group.isModel) {
                group = this.getGroup(group);
            }
    
            if (group != null) { // #919. Do not replace with "!==", beucase it should filter for null and undefined.
                key = (typeof group === 'string') ? group : group.getGroupKey();
                metaGroup = metaGroupCache[key];
    
                if (!metaGroup) {
                    metaGroup = metaGroupCache[key] = {
                        isCollapsed: false,
                        lastGroup: null,
                        lastGroupGeneration: null,
                        lastFilterGeneration: null,
                        aggregateRecord: new Ext.data.Model()
                    };
    
                    if (!metaGroupCache.map) {
                        metaGroupCache.map = {};
                    }
    
                    metaGroupCache.map[key] = true;
                }
            }
    
            return metaGroup;
        }
    });
  3. #3
    works
    Thanks.
    /Z
  4. #4
    Thank you for confirming!

    The fix has been committed in the SVN trunk revision #6598. It goes to the 3.3 release.

Similar Threads

  1. [CLOSED] Grouping Summary Script error (Bug?)
    By web_manufacturing in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 16, 2014, 3:56 PM
  2. Replies: 7
    Last Post: Mar 25, 2014, 6:21 AM
  3. Replies: 1
    Last Post: Jan 17, 2014, 3:43 PM
  4. [FIXED] [1.2] Grouping store error
    By softmachine2011 in forum Bugs
    Replies: 2
    Last Post: Sep 21, 2011, 11:37 AM
  5. [CLOSED] Remote grouping or grouping summary for GridPanel
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 08, 2009, 10:23 PM

Posting Permissions