[CLOSED] Column Header Group w/Filter in HeaderItems

  1. #1

    [CLOSED] Column Header Group w/Filter in HeaderItems

    Hello,
    I have a <GridPanel> that is being grouped, so I am using nested <Columns> to achieve the multi-level header rows with the group header on top and the individual column headers below. I also want to do filters in the column headers so I tried using <HeaderItems> which works fine for the second level headers, but the top 'group' header doesn't render the <HeaderItems>. If this method isn't possible is there another method to accomplish having the filter in the top header row? I know that I can put it in a <TopBar> but it's preferred to keep it consistent with the other headers. I'm using Ext.Net Pro V2.2 in VS 2010 .NET 4.0. Thanks for your help!

    <%@ Page Language="C#"%>
    <%@ Register Assembly="Ext.NET" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
        private List<object> Data
        {
            get
            {
                List<object> step = new List<object>
                    {   new { grpId = 1, grpName = "Group 1", comp = "Verizon", compId = 12458, numStores = 500,},
                        new { grpId = 1, grpName = "Group 1", comp = "Sprint", compId = 16842, numStores = 400,},
                        new { grpId = 2, grpName = "Group 2", comp = "Target", compId = 28415, numStores = 1000,},
                        new { grpId = 2, grpName = "Group 2", comp = "Walmart", compId = 84671, numStores = 2000,},
                        new { grpId = 2, grpName = "Group 2", comp = "K-Mart", compId = 75142, numStores = 10,},
                        new { grpId = 3, grpName = "Group 3", comp = "Burger King", compId = 38561, numStores = 700,},
                        new { grpId = 3, grpName = "Group 3", comp = "McDonalds", compId = 98765, numStores = 900,},
                        new { grpId = 4, grpName = "Group 4", comp = "Starbucks", compId = 69247, numStores = 1000,}
                   };
                return step;
            }
        }                      
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ExtResourceManager" runat="server" DisableViewState="false"></ext:ResourceManager>
        <ext:GridPanel ID="GridPanel1" runat="server" EnableColumnMove="false" Height="400" Width="400" MarginSpec="20 0 0 20" SortableColumns="false">
            <Store>
                <ext:Store ID="Store1" runat="server" GroupField="grpName">
                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="stepOccur">
                            <Fields>
                                <ext:ModelField Name="grpId" Type="Int" />
                                <ext:ModelField Name="grpName" />
                                <ext:ModelField Name="comp" />
                                <ext:ModelField Name="compId" Type="Int" />
                                <ext:ModelField Name="numStores" Type="Int" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="topColumn" runat="server" Text="Group" Hideable="false">
                        <HeaderItems>
                            <ext:TextField ID="TextField1" runat="server"></ext:TextField>
                        </HeaderItems>
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="compId" Groupable="false" Hideable="false" Width="50">
                                <HeaderItems>
                                    <ext:TextField ID="TextField2" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Company Name" DataIndex="comp" Groupable="false" Hideable="false" Width="250">
                                <HeaderItems>
                                    <ext:TextField ID="TextField3" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="# of Stores" DataIndex="numStores" Groupable="false" Hideable="false" Width="98">
                                <HeaderItems>
                                    <ext:TextField ID="TextField4" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                        </Columns>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping ID="Grouping1" runat="server" HideGroupedHeader="false" StartCollapsed="true" EnableNoGroups="false"
                    EnableGroupingMenu="false" GroupHeaderTplString='{name} ({children.length} Item{[values.children.length > 1 ? "s" : ""]})' />
            </Features>
            <TopBar>
                <ext:Toolbar ID="TopToolBar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Button1" Icon="Accept"></ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Button2" Icon="Add"></ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Thanks,
    JW
    Last edited by Daniil; Feb 20, 2014 at 3:24 PM. Reason: [CLOSED]
  2. #2
    Hi @jwhitmire36,

    Unfirtunately, it is not supported and I cannot find a good way to overcome it. A group column is supposed to have child columns only, nothing else.

    So, we have to recommend you to find another UI solution. Sorry for inconvenience.
  3. #3
    OK, thanks for looking into it for me.

    JW
  4. #4
    If anyone else is interested, to accomplish the look I wanted instead of using the group column header, I used the <HeaderConfig> of the <GridPanel> to place the filter textbox. Then I had to move the <ToolBar> outside of the grid panel to put it on top, otherwise it was between the column headers and the panel header.

    <%@ Page Language="C#"%>
    <%@ Register Assembly="Ext.NET" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
        private List<object> Data
        {
            get
            {
                List<object> step = new List<object>
                    {   new { grpId = 1, grpName = "Group 1", comp = "Verizon", compId = 12458, numStores = 500,},
                        new { grpId = 1, grpName = "Group 1", comp = "Sprint", compId = 16842, numStores = 400,},
                        new { grpId = 2, grpName = "Group 2", comp = "Target", compId = 28415, numStores = 1000,},
                        new { grpId = 2, grpName = "Group 2", comp = "Walmart", compId = 84671, numStores = 2000,},
                        new { grpId = 2, grpName = "Group 2", comp = "K-Mart", compId = 75142, numStores = 10,},
                        new { grpId = 3, grpName = "Group 3", comp = "Burger King", compId = 38561, numStores = 700,},
                        new { grpId = 3, grpName = "Group 3", comp = "McDonalds", compId = 98765, numStores = 900,},
                        new { grpId = 4, grpName = "Group 4", comp = "Starbucks", compId = 69247, numStores = 1000,}
                   };
                return step;
            }
        }                      
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ExtResourceManager" runat="server" DisableViewState="false"></ext:ResourceManager>
        <ext:Container ID="Container1" runat="server" Layout="VBoxLayout" MarginSpec="20 0 0 20">
            <Items>
                <ext:Toolbar ID="TopToolBar1" runat="server" Width="400">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Button1" Icon="Accept"></ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Button2" Icon="Add"></ext:Button>
                    </Items>
                </ext:Toolbar>
                <ext:GridPanel ID="GridPanel1" runat="server" EnableColumnMove="false" Height="400" Width="400" SortableColumns="false">
                    <Store>
                        <ext:Store ID="Store1" runat="server" GroupField="grpName">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="stepOccur">
                                    <Fields>
                                        <ext:ModelField Name="grpId" Type="Int" />
                                        <ext:ModelField Name="grpName" />
                                        <ext:ModelField Name="comp" />
                                        <ext:ModelField Name="compId" Type="Int" />
                                        <ext:ModelField Name="numStores" Type="Int" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <HeaderConfig>
                        <Items>
                            <ext:TextField ID="TextField1" runat="server" FieldLabel="Group" LabelSeparator="" LabelWidth="50"></ext:TextField>
                        </Items>
                    </HeaderConfig>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="compId" Groupable="false" Hideable="false" Width="50">
                                <HeaderItems>
                                    <ext:TextField ID="TextField2" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Company Name" DataIndex="comp" Groupable="false" Hideable="false" Width="250">
                                <HeaderItems>
                                    <ext:TextField ID="TextField3" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="# of Stores" DataIndex="numStores" Groupable="false" Hideable="false" Width="98">
                                <HeaderItems>
                                    <ext:TextField ID="TextField4" runat="server"></ext:TextField>
                                </HeaderItems>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Features>
                        <ext:Grouping ID="Grouping1" runat="server" HideGroupedHeader="false" StartCollapsed="true" EnableNoGroups="false"
                            EnableGroupingMenu="false" GroupHeaderTplString='{name} ({children.length} Item{[values.children.length > 1 ? "s" : ""]})' />
                    </Features>
                </ext:GridPanel>
            </Items>
        </ext:Container>
        </form>
    </body>
    </html>
  5. #5
    Good! Thank you for sharing the final solution.

Similar Threads

  1. [CLOSED] Gridpanel Filter column and Header Group
    By Marcelo in forum 1.x Premium Help
    Replies: 3
    Last Post: Feb 06, 2013, 10:17 AM
  2. [FIXED] [1.6] Header Group Column layout bug
    By ascsolutions in forum Bugs
    Replies: 11
    Last Post: Aug 30, 2012, 12:20 PM
  3. ¿ GridView how to hide the column header filter ?
    By xtremexploit in forum 1.x Help
    Replies: 6
    Last Post: May 07, 2012, 3:24 PM
  4. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 3:44 PM
  5. [CLOSED] [1.0] Grid column header group - span multiple rows
    By Neil_Walters in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 14, 2011, 11:11 PM

Posting Permissions