Hello again, Chris!
It was actually another example/thread that best matched your needs!
First off, this is a feature Ext.NET (nor ExtJS) does not have, so you have to do it your own.
Here is one approach that you can take to attain this. It does not felt like too slow for the page, so I guess it is alright. Of course, there are plenty of room for optimization here!
The actual thread would be this:
Backgroud row group in gridpanel. It is also reasonably recent and inspired the reply for the first thread I linked above, but that's non-related detail.
As for your sample, to color the groups according to the contents of the group, the events that redraw the group title have to be catched and then have the corresponding color reflected to the HTML element. The capture pattern had to change between 2.x and the 3.x example on the thread linked above. This far, it looks sane but again, I didn't dig too deep as to override the render functions of the group plugin:
<%@ 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)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "Old", "O", 20, "Bob" },
new object[] { "Old", "O", 15, "Mike" },
new object[] { "New", "N", 1, "Susie" },
new object[] { "New", "N", 1, "Chris" },
new object[] { "New", "N", 2, "Becky" }
};
}
}
</script>
<head runat="server">
<title>GridPanel GroupHeaderTpl</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<HtmlBin>
<script type="text/javascript">
var ageRenderer = function (value, metadata, record, rowIndex, colIndex, store, view) {
switch (record.data.ageType) {
case 'O':
metadata.style = "color: red;";
break;
case 'N':
metadata.style = "color: green;";
break;
default:
metadata.style = "color: black;";
break;
}
return value;
};
var handleGroupChange = function (store, groupers) {
store.needsRepaint = true;
};
var handleCollapseExpand = function (item, node, group) {
item.store.needsRepaint = true;
paintGroupHeaders(item.store);
};
var paintGroupHeaders = function (store) {
var i, j, thisGroup, thisGroupName, thisAge, found,
greenColor = "#cfc", redColor = "#fcc", // light variations of the colors
groupColors = [], headerList, records;
console.log('check for repaint...');
// if the store is not grouped, no painting will be necessary. Return already.
if (!store.isGrouped()) {
store.needsRepaint = false;
}
if (!store.needsRepaint) {
return;
}
console.log('performing repaint...');
records = store.data.items
// 1. for each record in the grid
for (i = 0; i < records.length; i++) {
thisGroupName = records[i].data.ageName;
thisAge = records[i].data.ageType;
// 1.1. check if we already tracked the group
found = false; // initially, we didn't see the group in our cache
for (j = 0; j < groupColors.length; j++) {
if (groupColors[j].groupName == thisGroupName) {
found = true;
// 1.1.1. If we have it, then remember it on thisGroup.
thisGroup = groupColors[j];
break;
}
}
// 1.1.2. create the group info if we didn't find it, binding 'green' color by default and to thisGroup variable
if (!found) {
thisGroup = {
groupName: thisGroupName,
color: greenColor
};
groupColors.push(thisGroup);
}
// 1.2. apply the red color if age is 'Old'
// as the color is green by default it is sufficient to:
// 1.2.1. if thisAge is "O" and color is not already red, bind it red color
if (thisAge == "O" && thisGroup.color != redColor) {
thisGroup.color = redColor;
}
}
// 2. After loading the groups' info, then apply the css style to each groups' headers:
for (i = 0; i < groupColors.length; i++) {
thisGroup = groupColors[i];
headerList = document.querySelectorAll(".x-grid-group-row div[id=\"" + App.GridPanel1.view.id + "-hd-" + thisGroup.groupName + "\"]");
// by chance, if more than one group header row is found on the page, apply the style to them all!
// you may alternatively throw an error if headerList.length != 1
for (j = 0; j < headerList.length; j++) {
headerList[j].style.backgroundColor = thisGroup.color;
};
}
// It is done, no re-painting until store has it marked in.
store.needsRepaint = false;
};
</script>
</HtmlBin>
<Store>
<ext:Store runat="server" GroupField="ageName">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ageName" />
<ext:ModelField Name="ageType" />
<ext:ModelField Name="years" Type="Int" />
<ext:ModelField Name="owner" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<GroupChange Fn="handleGroupChange" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Age" DataIndex="ageName">
<Renderer Fn="ageRenderer" />
</ext:Column>
<ext:Column runat="server" Text="Years" DataIndex="years" Align="Center" Groupable="false" />
<ext:Column runat="server" Text="Owner" DataIndex="owner" Groupable="false" />
</Columns>
</ColumnModel>
<ViewConfig>
<Listeners>
<Refresh Handler="paintGroupHeaders(item.store);" />
<GroupExpand Fn="handleCollapseExpand" />
<GroupCollapse Fn="handleCollapseExpand" />
</Listeners>
</ViewConfig>
<Listeners>
<AfterLayout Handler="item.store.needsRepaint=true;" />
</Listeners>
<SelectionModel>
<ext:RowSelectionModel ID="gp1Selection" runat="server" ClientIDMode="Static" Mode="Multi" AllowDeselect="true" />
</SelectionModel>
<Features>
<ext:Grouping ID="gp1Grouping" runat="server" ClientIDMode="Static" EnableGroupingMenu="true" HideGroupedHeader="true" GroupHeaderTplString="{columnName}: {name} ({rows.length})" />
</Features>
</ext:GridPanel>
</body>
</html>
I hope this helps! The simplified samples you provide really helped!
