PDA

View Full Version : [CLOSED] Grid Group Header Tpl



cwolcott
Feb 06, 2015, 1:23 PM
Is it OK to have hyperlinks in the group tpl string? It appears that it is, except that seperator1 below " » " causes the group not to be able to expand after collapsing just a single group. If I use seperator2 " | " every thing works fine.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
return;

BuildStore();

}

private void BuildStore()
{
string seperator1 = " &raquo; ";
string seperator2 = " | ";

string premiumHelp2x = "<a href='http://forums.ext.net/forum.php' Target='_blank'>Ext.Net Forums</a>" + seperator1 +
"<a href='http://forums.ext.net/forumdisplay.php?13'>Premium</a>" + seperator1 +
"<a href='http://forums.ext.net/forumdisplay.php?17-2'>2.x Premium Help</a>";

List<object> data = new List<object>
{
new { Id = 53271, DateCreated = DateTime.Parse("2/5/2015 11:50"), Forum = premiumHelp2x, UrlTitle ="<a href='http://forums.ext.net/showthread.php?53271'>Grid Group: Show full datetime but group by month day year</a>", User="cwolcott", Status="Open"},
new { Id = 40901, DateCreated = DateTime.Parse("8/5/2014 14:20"), Forum = premiumHelp2x, UrlTitle="<a href='http://forums.ext.net/showthread.php?40901'>[CLOSED] Field focus problem</a>", User="matrixwebtech", Status="Closed" },
};

this.GridStore.DataSource = data;
this.GridStore.DataBind();
}
</script>
<head runat="server">
<title>Grid Grouping Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel" runat="server" ClientIDMode="Static" >
<Store>
<ext:Store ID="GridStore" runat="server" GroupField="Forum">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="DateCreated" Type="Date" />
<ext:ModelField Name="Forum" Type="String" />
<ext:ModelField Name="UrlTitle" Type="String" />
<ext:ModelField Name="User" Type="String" />
<ext:ModelField Name="Status" Type="String" />
</Fields>
</ext:Model>
</Model>
<Groupers>
</Groupers>
<Listeners>
<GroupChange Handler="var isGrouped = this.isGrouped(); #{CartEcBtn}.setDisabled(!isGrouped);" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Id" DataIndex="Id" Width="50" Groupable="false" />
<ext:DateColumn runat="server" Text="Created" DataIndex="DateCreated" Format="Y-MM-dd hh:mm:ss a"
Width="170" />
<ext:Column runat="server" Text="User" DataIndex="User" Width="90" />
<ext:Column runat="server" Text="Status" DataIndex="Status" Width="60" />
<ext:Column runat="server" Text="Forum" DataIndex="Forum" Flex="1" />
<ext:Column runat="server" Text="Thread Title" DataIndex="UrlTitle" Flex="2" Groupable="false" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<Features>
<ext:Grouping ID="GridGrouping" runat="server" StartCollapsed="false" HideGroupedHeader="true">
<GroupHeaderTpl runat="server">
<Html>
<tpl if="groupField === 'DateCreated'">
{name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
</tpl>
<tpl if="groupField === 'Forum'">
Forum: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
</tpl>
<tpl if="groupField === 'User'">
Creator: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
</tpl>
<tpl if="groupField === 'Title'">
Month Created: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
</tpl>
<tpl if="groupField === 'Status'">
Status: {name} [{rows.length} Item{[values.rows.length > 1 ? 's' : '']}]
</tpl>
</Html>
</GroupHeaderTpl>
</ext:Grouping>
</Features>
<Listeners>
<AfterRender Handler="#{GridGrouping}.expanded = true;" />
</Listeners>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="CartEcBtn" runat="server" Text="Expand/Collapse Groups" Icon="TableSort">
<Listeners>
<Click Handler="#{GridGrouping} [ #{GridGrouping}.expanded ? 'collapseAll' : 'expandAll'](); #{GridGrouping}.expanded = !#{GridGrouping}.expanded;" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</body>
</html>

fabricio.murta
Feb 06, 2015, 7:35 PM

cwolcott
Feb 06, 2015, 9:42 PM

fabricio.murta
Feb 06, 2015, 10:21 PM
I'm glad I was able to help! :)