[OPEN] [#328] Issue with Store Filter and group StartCollapsed=true

  1. #1

    [OPEN] [#328] Issue with Store Filter and group StartCollapsed=true

    Hi,

    In the following example filtering does not render the rows if before filter we set StartCollapsed = true for the group.

    Please do the following to reproduce :

    1) Click on Remove Grouping button to remove grouping.
    2) Click Filter By Task Id 10 to filter the result with task id contains 10.
    3) You will notice the text in the rows are not rendered properly.
    4) Remove filter will also not work in this case.

    If you remove StartCollapse = true , or reset grouping it will work.

    But if you remove grouping and set StartCollapsed=true, it wont work

    Below given is the code :

    
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    
    
    
    <%@ Import Namespace="System.Globalization" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    
    
    <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(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci),4),
                new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci),1),
                new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci),6),            
                new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci),5),
                new Project(102, "Ext Grid: Summary Rows",          105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci),3),
                new Project(102, "Ext Grid: Summary Rows",          106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci),1),
                new Project(102, "Ext Grid: Summary Rows",          107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci),5),
                new Project(102, "Ext Grid: Summary Rows",          108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci),1),
                new Project(102, "Ext Grid: Summary Rows",          109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci),1),
                new Project(102, "Ext Grid: Summary Rows",          110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci),3),
                new Project(102, "Ext Grid: Summary Rows",          111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci),4),
                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),3),
                new Project(100, "Ext Forms: Field Anchoring",      113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci),1),
                new Project(100, "Ext Forms: Field Anchoring",      114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci),2),
                new Project(100, "Ext Forms: Field Anchoring",      115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci),1)            
            };
    
    
            store.DataBind();
        }
    
    
        protected void BindStore2(object sender, DirectEventArgs e)
        {
            //Group1.StartCollapsed = true;
            CultureInfo ci = new CultureInfo("en-US");
    
    
            Store store = gridChild1.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),1),
                new Project(100, "Ext Forms: Field Anchoring",      113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci),1),
                new Project(100, "Ext Forms: Field Anchoring",      114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci),8),           
            };
    
    
    
    
            store.DataBind();
        }
        public class Project
        {
            public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due, int hasVersions)
            {
                this.ProjectID = projectId;
                this.Name = name;
                this.TaskID = taskId;
                this.Description = description;
                this.Estimate = estimate;
                this.Rate = rate;
                this.Due = due;
                this.hasVersions = hasVersions;
            }
    
    
    
    
            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; }
            public int hasVersions { get; set; }
        }
    </script>
    
    
    
    
    <script type="text/javascript">
        OnGridResultsExpand = function () {
            return true;
        }
        setRowExpanderSign = function () {
    
    
            var rows = App.GridPanel1.store.getCount();
            for (var i = 0; i < rows; i++) {
                var record = App.GridPanel1.store.getAt(i);
    
    
                if (record.data.hasVersions < 2) {
                    var cell = App.GridPanel1.view.getCellByPosition({ row: i, column: 1 });
                    var ele = Ext.get(cell.dom);
                    if (ele != null) {
                        ele = ele.select(".x-grid-row-expander").elements;
                        if (ele.length > 0) {
                            ele[0].className = "";
                        }
                    }
                }
            }
        }
        groupClick = function (view, node, group, e, eOpts) {
    
    
            if (!App.Group1.isExpanded(group)) return;
            var records = App.GridPanel1.store.getGroups(group).children;
            Ext.each(records, function (record) {
                if (record.isUpdated == undefined && record.data.hasVersions < 2) {
                    var cell = "";
                    cell = App.GridPanel1.view.getCellByPosition({ row: record.index, column: 1 });
                    var ele = Ext.get(cell.dom);
                    if (ele != null) {
                        ele = ele.select(".x-grid-row-expander").elements;
                        if (ele.length > 0) {
                            ele[0].className = "";
                        }
                    }
                }
            });
        }
        filterGridGroup = function (filterBy, value) {
    
    
            if (value == "") {
                App.Group1.startCollapsed = true;
                App.GridPanel1.getStore().clearFilter();
                return;
            }
            filterBy = filterBy.split(" (")[0];
    
    
            //App.gridMask.setMsgAndShow("Filtering by " + filterBy);
            window.setTimeout(function () {
                App.Group1.startCollapsed = true;
                store = App.GridPanel1.getStore();
                store.clearFilter();
    
    
                if (value != "") {
                    store.filterBy(function (record) {
                        flag = false;
                        Ext.each(value, function (val) {
                            if 
                                (record.data[filterBy].toString().toLowerCase().indexOf(val.toString().toLowerCase()) != -1) {
                                flag = true;
                            }
                        });
                        if (flag)
                            return true;
                    });
                }
            }, 500);
        }
    </script>
    <!DOCTYPE html>
    
    
    
    
    
    
    
    
    <html>
    <head id="Head1" runat="server">
        <title>GroupingSummary Plugin with Summary row - Ext.NET Examples</title>
    
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="App" />
            <%--<ext:Viewport runat="server">
               <HtmlBin>
                    <%# Html.ExtPartial("testView") %>
               </HtmlBin>
           </ext:Viewport>--%>
    
    
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Frame="true"
                Title="Sponsored Projects"
                Icon="ApplicationViewColumns"
                Width="800"
                Height="550">
                <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" />
                                    <ext:ModelField Name="hasVersions" Type="Int" />
                                </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="Task Id" DataIndex="TaskID" Width="60" />
    
    
                        <ext:Column ID="Column9" runat="server" Text="Versions" DataIndex="hasVersions" Width="60" />
    
    
                        <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 ID="CheckboxSelectionModel1" runat="server" CheckOnly="true"></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>
                            <ext:ToolbarSpacer></ext:ToolbarSpacer>
                            <ext:Button runat="server" Text="Remove Groping">
                                <Listeners>
                                    <Click Handler="App.Group1.disable()"></Click>
                                </Listeners>
                            </ext:Button>
    
    
                            <ext:ToolbarSpacer></ext:ToolbarSpacer>
                            <ext:Button runat="server" Text="Filter By Task Id 10">
                                <Listeners>
                                    <Click Handler="filterGridGroup('TaskID','10');"></Click>
                                </Listeners>
                            </ext:Button>
    
    
                            <ext:ToolbarSpacer></ext:ToolbarSpacer>
                            <ext:Button runat="server" Text="Remove Filter">
                                <Listeners>
                                    <Click Handler="App.GridPanel1.store.clearFilter()"></Click>
                                </Listeners>
                            </ext:Button>
    
    
                            <ext:ToolbarSpacer></ext:ToolbarSpacer>
                            <ext:Button runat="server" Text="Reset Grouping">
                                <Listeners>
                                    <Click Handler="App.Group1.enable()"></Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Features>
                    <ext:GroupingSummary ID="Group1" runat="server" GroupHeaderTplString="{name}" StartCollapsed="true" HideGroupedHeader="true"></ext:GroupingSummary>
                </Features>
                <Listeners>
    
    
                    <GroupClick Fn="groupClick"></GroupClick>
                </Listeners>
    
    
                <Plugins>
    
    
    
    
                    <ext:RowExpander ID="gridResultsExpander" Visible="true" runat="server" ExpandOnDblClick="false" IDMode="Explicit">
    
    
    
    
                        <Component>
    
    
    
    
                            <ext:GridPanel ID="gridChild1" runat="server" PageX="55" ForceFit="true" Width="930" EnableColumnHide="false">
                                <Store>
                                    <ext:Store ID="Store167" runat="server" AutoLoad="false">
                                        <Reader>
                                            <ext:JsonReader IDProperty="fileId"></ext:JsonReader>
                                        </Reader>
                                        <Model>
                                            <ext:Model ID="Model257" runat="server">
                                                <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="ColumnModel2" runat="server">
                                    <Columns>
                                        <ext:Column ID="Column6" runat="server" Text="Project" DataIndex="Name" Width="20" />
                                        <ext:Column ID="Column7" runat="server" Text="Project" DataIndex="TaskID" Width="40" />
                                        <ext:Column ID="Column8" runat="server" Width="75" Text="Estimate" DataIndex="Description"></ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <View>
                                    <ext:GridView ID="GridView2" runat="server" PreserveScrollOnRefresh="true"></ext:GridView>
                                </View>
                            </ext:GridPanel>
                        </Component>
    
    
    
    
                        <Listeners>
                            <BeforeExpand Handler="#{gridChild1}.store.removeAll();return OnGridResultsExpand(item,record,body,row,rowIndex);"></BeforeExpand>
    
    
                        </Listeners>
                        <DirectEvents>
                        </DirectEvents>
                        <Renderer Handler="return record.data.hasVersions >= 2;"></Renderer>
    
    
                    </ext:RowExpander>
    
    
                </Plugins>
    
    
            </ext:GridPanel>
    
    
    
    
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 27, 2013 at 4:56 AM. Reason: [OPEN] [#328]
  2. #2
    Hello!

    Thank you! We are investigating.
  3. #3
  4. #4
    Quote Originally Posted by Baidaly View Post
    Hi,

    Is there a workaround untill then ?

    Our product is live and we are facing this issue.
  5. #5
    What about to clear startCollapsed flag before filter/clearFilter calling?
     window.setTimeout(function () {            
                App.Group1.startCollapsed = false;
                store = App.GridPanel1.getStore();
                store.clearFilter();
                ....
                ....
    <Click Handler="App.Group1.startCollapsed = false; App.GridPanel1.store.clearFilter()"></Click>
  6. #6
    Hi Vlad,
    We want to keep everything collapsed after filter and hence we set it. Since its a common function, we dont have a check that the whether the store is grouped or no. We will put that check in place that if its not grouped, dont set StartCollapsed.

    However, even if we do that, I think this should be an autocheck instead of breaking. What do you think?
  7. #7
    Unfortunately, ExtJS 4.2.1 has rewriten grouping functionality and lots of bugs were introduced. We have to wait new release from Sencha
    What about to collapse groups after clearFilter/filter calling?
  8. #8
    Hi,
    I understand.

    I cannot collapse after filter. It will look a bit weird, to show the rows 1st and then collapse, even it happens within a second it does'nt look alright. But we are good with this, as we wont set StartCollapsed=true if we have no grouping.
  9. #9
    Sencha opened a bug.

    We created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/328

Similar Threads

  1. [CLOSED] Issue with grouping startcollapsed= true and RowExpander
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 05, 2013, 6:16 PM
  2. Replies: 4
    Last Post: Jun 03, 2013, 4:11 PM
  3. [CLOSED] Grouping - Issue with StartCollapsed=true
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 03, 2013, 3:49 PM
  4. Replies: 0
    Last Post: Sep 05, 2012, 10:27 AM
  5. Replies: 0
    Last Post: May 04, 2010, 7:08 AM

Posting Permissions