[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!
Code:
<%@ 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
