[OPEN] [#264] Multiple Grouping Issues in Grid

[amitpareek]

Hi,
Have a few issues with Grouping:

• In the following code, the Expand 1st group. Collaps It. Again Expand it. Buttons will disappear.
• After Page Load, Expand Directly 3rd Row. Buttons wont render.
• Expand 3rd Group (Only after expandind 1st Row) and Check any of the rows. It will not check the row, but the checkedRow minus 4th Row. So check the 111 TaskID row, it will check 7th Row.

The issues happen more if there are more than 4 records. But 1st point is irrespective of no of records.

<%@ Page Language="C#" %>
 
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        BindStore();
    }


    protected void LoadGrid(object sender, DirectEventArgs e) {


        BindStore();
    }


    private void BindStore() {
        Group1.StartCollapsed = true;
        CultureInfo ci = new CultureInfo("en-US");


        Store store = this.GridPanel1.GetStore();


        store.DataSource = new List<Project> 
        { 
            new Project(100, "Ext Forms: Field Anchoring",      112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring",      113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring",      114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring",      115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
        };


        store.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>GroupingSummary Plugin with Summary row - Ext.NET Examples</title>
    


 <script type="text/javascript">
     var groupClick = function () {
         
     }
 </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
         
        <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">
                   
                    <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="Due" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />
                    <ext:Column ID="Column5" runat="server" Text="Project" DataIndex="TaskID" Width="40" /> 
                    <ext:Column ID="Column2"
                        runat="server"
                        Width="85"
                        Text="Due Date"
                        DataIndex="Due"
                        >
                       
                    </ext:Column>
 
                    <ext:Column ID="Column3"
                        runat="server"  
                        Width="75"
                        Text="Estimate"
                        DataIndex="Estimate"
                        >
                       
                    </ext:Column>
                     
                    <ext:Column ID="Column4"
                        runat="server"
                        Width="75"
                        Text="Rate"
                        DataIndex="Rate">
                       
                    </ext:Column>
                     
                    <ext:Column
                        runat="server"
                        Width="75"
                        ID="Cost"
                        Text="Cost"
                        DataIndex="Cost"
                       >
                        
                    </ext:Column>
                    <ext:CommandColumn ID="CommandColumnGridSavedSearch" runat="server" Flex="1">
                <Commands>
                    <ext:GridCommand Text="Follow" CommandName="follow" MinWidth="55"></ext:GridCommand>
                </Commands>
                <Commands>
                    <ext:GridCommand Text="Action" Icon="LightningGo">
                        <Menu>
                            <Items>
                                <ext:MenuCommand Text="Run Query" Hidden="true" Icon="Magnifier" CommandName="runQuery"></ext:MenuCommand>
                                <ext:MenuCommand Text="View" Icon="NoteGo" CommandName="viewQuery">
                                </ext:MenuCommand> 
                                <ext:MenuCommand Text="Edit" Icon="NoteEdit" CommandName="editQuery"></ext:MenuCommand>
                                <ext:MenuCommand Text="Delete" Icon="Delete" CommandName="deleteQuery"></ext:MenuCommand>
                                <ext:MenuCommand Text="Share" Icon="ArrowDivide">
                                    <Menu>
                                        <Items>
                                            <ext:MenuCommand Text="Users" CommandName="share_users" Icon="UserBrown" />
                                            <ext:MenuCommand Text="Groups" CommandName="share_group" Icon="GroupGear" />
                                        </Items>
                                    </Menu>
                                </ext:MenuCommand>
                            </Items>
                        </Menu>
                    </ext:GridCommand>
                </Commands>
               
            </ext:CommandColumn>
                </Columns>                
            </ColumnModel>
           
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server"></ext:CheckboxSelectionModel>
            </SelectionModel>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Load Grid">
                            <DirectEvents>
                                <Click OnEvent="LoadGrid"></Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Features>
                <ext:GroupingSummary ID="Group1" runat="server" GroupHeaderTplString="{name}" StartCollapsed="true" HideGroupedHeader="true"></ext:GroupingSummary>
            </Features>
            
        </ext:GridPanel>
    </form>
  </body>
</html>

[Daniil]

Hi @amitpareek,

Thank you for the report.

I see the following error occurs:

TypeError: Ext.fly(...) is null
div = Ext.fly(tdCmd[i]).first("div");

in our insertToolbars function.

We will investigate.

[amitpareek]

Yes. For some unknown reason, it iterates record.length+index and fails on the final one. May be its expecting summary row which is not there.

Also, did you expand 1st Group, and then last group, and try selecting check boxes the way I explained? It will check the record minus 4 records.

[amitpareek]

Hey Daniil,
Is it possible it could be fixed today? We have demo today, it will be good to have it fixed by then.

[Vladimir]

The buttons issues is related with ExtJS issue (i am preparing report for Sencha)
The issue can be solved partially if remove StartCollapsed=false but if you collapse all groups after rendering then you see the issue again

I will post link to Sencha report here

[Vladimir]

Here is the link
http://www.sencha.com/forum/showthre...issue&p=971685

Let see the answer from Sencha

[Baidaly]

Hello!

Sencha has opened a bug in their bug tracker.

We have created an issue to track this defect: https://github.com/extnet/Ext.NET/issues/264

[amitpareek]

Hi Vlad,
There were 2 concerns in this.
1 the image does'nt show up.
2nd when you expand and collapse the 3rd group and then expand again, you wont be able to select the rows with checkboxes (CheckBoxSelectionModel).

Did you look at both of them?

[Vladimir]

Yes, both issues is related with one ExtJS bug

[amitpareek]

Ok Sir! I guess I will have to wait long?