[CLOSED] Grouping View Custom Template
How do I define a custom template for the grouping headers in a grid? I want to style the entire header, which includes ".x-grid-group-hd div" (the div that contains the expander image).
When I tried this:
Code:
gv.GroupTextTpl = "{text} ({[values.rs.length]} {[values.rs.length > 1 ? ""funds"" : ""fund""]})"
it only styled the inner portion, which is not what I want.
I want each different grouping header to be a different color, and that color comes from the DB store.
RE: [CLOSED] Grouping View Custom Template
Hi Peter,
I was able to get this working by adding the "colorcode" to a simple within the header, then grabbing that code out after the groups load. It's a bit awkward, but it does work well.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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 runat="server">
<title>GridPanel GroupingView with EnableRowBody - Coolite Toolkit Example</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
// This "setGroupStyle" function is called when the GroupingView is refreshed.
// See <Refresh> Listener on the <ext:GroupingView>
var setGroupStyle = function(view) {
// get an instance of the Groups
var groups = view.getGroups();
for (var i = 0; i < groups.length; i++) {
// Loop through the Groups, the do a query to find the with our ColorCode
// Get the "id" from the and split on the "-", the second array item should be our ColorCode
var color = "#" + Ext.query("span", groups[i])[0].id.split("-")[1];
// Set the "background-color" of the original Group node.
Ext.get(groups[i]).setStyle("background-color", color);
}
}
</script>
<ext:Store runat="server" ID="Store1" AutoLoad="true" GroupField="Light">
<Proxy>
<ext:HttpProxy Method="POST" Url="../../Shared/PlantService.asmx/Plants" />
</Proxy>
<Reader>
<ext:XmlReader Record="Plant">
<Fields>
<ext:RecordField Name="Common" />
<ext:RecordField Name="Botanical" />
<ext:RecordField Name="Zone" Type="Int" />
<ext:RecordField Name="ColorCode" />
<ext:RecordField Name="Light" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Availability" Type="Date" />
<ext:RecordField Name="Indoor" Type="Boolean" />
</Fields>
</ext:XmlReader>
</Reader>
<SortInfo Field="Common" Direction="ASC" />
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Collapsible="true"
Width="600"
Height="350"
AutoExpandColumn="Common"
Title="Plants"
Frame="true"
StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Common" Header="Common Name" DataIndex="Common" Width="220" Sortable="true" />
<ext:Column Header="Light" DataIndex="Light" Width="130" Sortable="true" />
<ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Sortable="true" Groupable="false">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Available" DataIndex="Availability" Width="95" Sortable="true" Groupable="false">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column Header="Indoor?" DataIndex="Indoor" Width="55" Sortable="true" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<View>
<ext:GroupingView
ID="GroupingView1"
HideGroupedColumn="true"
runat="server"
ForceFit="true"
StartCollapsed="true"
GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
EnableRowBody="true">
<Listeners>
<Refresh Fn="setGroupStyle" />
</Listeners>
<GetRowClass Handler="var d = record.data; rowParams.body = String.format('<div style=\'padding:0 5px 5px 5px;\'>The {0} [{1}] requires light conditions of {2}.<br />Price: {3}
', d.Common, d.Botanical, d.Light, Ext.util.Format.usMoney(d.Price));" />
</ext:GroupingView>
</View>
<Buttons>
<ext:Button
ID="btnToggleGroups"
runat="server"
Text="Expand/Collapse Groups"
Icon="TableSort"
Style="margin-left: 6px;"
AutoPostBack="false">
<Listeners>
<Click Handler="#{GridPanel1}.getView().toggleAllGroups();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>
Also note that the "Groupable" property has been added to the <ext:Column>. If "false", that particular Column can not be grouped.
Hope this helps.
RE: [CLOSED] Grouping View Custom Template
That looks like it might work, but I have a problem. I need to add the listener in code-behind. The whole grouping view is created in code.
Code:
Protected Function MakeNewGroupingView() As GroupingView
Dim gv As GroupingView = New GroupingView()
gv.HideGroupedColumn = True
gv.ForceFit = True
gv.AutoFill = True
gv.EnableGroupingMenu = False
gv.StartCollapsed = False
gv.ShowGroupName = False
If sLang = "EN" Then
gv.GroupTextTpl = "{[values.rs[0].data.FundGroupNameComplex]} ({[values.rs.length]} {[values.rs.length > 1 ? ""funds"" : ""fund""]})"
Else
gv.GroupTextTpl = "{[values.rs[0].data.FundGroupNameComplex]} ({[values.rs.length]} {[values.rs.length > 1 ? ""fond"" : ""fonds""]})"
End If
gv.AddListener("Refresh", "setGroupStyle")
Return gv
End Function
P.S. I replaced dash with underscore in the JavaScript also.
When I run this, I get an error in Firebug's console:
"XML descendants internal method called on incompatible XPCCrossOriginWrapper"
RE: [CLOSED] Grouping View Custom Template
Quote:
That looks like it might work, but I have a problem. I need to add the listener in code-behind. The whole grouping view is created in code.
You should be able to just set the .Refresh Listeners .Fn property.
Example
Code:
this.GroupingView1.Listeners.Refresh.Fn = "setGroupStyle";
RE: [CLOSED] Grouping View Custom Template
Ok that almost worked.
See the screen grab, it colors too much, the color affects the rows themselves, which is not what I want. I only want to affect the grouping rows.
RE: [CLOSED] Grouping View Custom Template
Mark this one CLOSED
I used .firstChild and it's done
Code:
<script type="text/javascript">
// This "setGroupStyle" function is called when the GroupingView is refreshed.
// See <Refresh> Listener on the <ext:GroupingView>
var setGroupStyle = function(view) {
// get an instance of the Groups
var groups = view.getGroups();
for (var i = 0; i < groups.length; i++) {
// Loop through the Groups, the do a query to find the with our ColorCode
// Get the "id" from the and split on the "-", the second array item should be our ColorCode
var color = "#" + Ext.query("span", groups[i])[0].id.split("_")[1];
// Set the "background-color" of the original Group node.
Ext.get(groups[i].firstChild).setStyle("background-color", color);
Ext.get(groups[i].firstChild).setStyle("color", "#fff");
}
}
</script>
RE: [CLOSED] Grouping View Custom Template
Hi Peter,
Thanks for the update! [CLOSED]
I think you might be able to tighten up the two lines into one by using .applyStyles().
Example
Code:
Ext.get(groups[i].firstChild).applyStyles({"backgroud-color": color, "color": "#fff"});
See*http://extjs.com/deploy/dev/docs/?cl...er=applyStyles
Hope this helps.
RE: [CLOSED] Grouping View Custom Template
Thanks, but one more thing came up...
I have a TabPanel with a number of tabs, each with its own gridpanel. The TabPanel is defined with DeferredRender="True"
When I load the page, the refresh event is called on the first, VISIBLE grid in tab #0 but then when I tab over to the other grids, there is no refresh event and the styles do not get applied.
I tried trapping the tab's activate event but that fires before the gridpanel is rendered. That means there is no grid panel, and no view either.
I tried other listeners but none of them seem to fire after the grid is created the first time.
Why is not refresh event fired for views that are hidden?
RE: [CLOSED] Grouping View Custom Template
Quote:
Why is not refresh event fired for views that are hidden?
If the GridPanel is inside a Tab this not active and DeferredRender="true", then the GridPanel basically does not exist on the Page. The DOM objects will not be created until the Tab becomes active and the Page refreshes. At that point the Refresh event should fire.
RE: [CLOSED] Grouping View Custom Template
Well as you can clearly see here: http://204.225.175.213/fundlist.aspx it does not fire.
Only the first tab ("Overview") has the styles applied.