[CLOSED] Displaying different background and font colors for each grouping

Hello,

Is it possible to assign each grouping a different background color in a GridPanel?
Below is my setup of a GridPanel:

Code:

<ext:GridPanel ID="GridPanel1" runat="server" > <View> <ext:GroupingView ID="GroupingView1" runat="server" HideGroupedColumn="true" HeadersDisabled="true" StandardHeaderRow="false" StartCollapsed="false" GroupTextTpl="{[Ext.util.Format.date(values.rs[0].data.WrapStartDate, 'M-d-Y')]} ({[values.rs.length]} {[values.rs.length == 1 ? 'Run' : 'Runs']})"> </ext:GroupingView> </View> </GridPanel>

Hi,

I would use GetRowClass.
http://docs.sencha.com/ext-js/3-4/#!...od-getRowClass

Example

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) { Store store = this.GridPanel1.GetStore(); store.DataSource = new object[] { new object[] { "group1", "1", "1" }, new object[] { "group1", "11", "11" }, new object[] { "group1", "111", "111" }, new object[] { "group2", "2", "2" }, new object[] { "group2", "22", "22" }, new object[] { "group2", "222", "222" } }; store.DataBind(); } } </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 runat="server"> <title>Ext.NET Example</title> <script type="text/javascript"> var getRowClass = function (record, index, rowParams, store) { var cls = record.get(this.getGroupField()); return cls; }; </script> <style type="text/css"> .group1 { background-color: green; } .group2 { background-color: yellow; } </style> </head> <body> <ext:ResourceManager runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true"> <Store> <ext:Store runat="server" GroupField="groupId"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="groupId" /> <ext:RecordField Name="test1" /> <ext:RecordField Name="test2" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> </Store> <ColumnModel runat="server"> <Columns> <ext:Column Header="GroupId" DataIndex="groupId" /> <ext:Column Header="Test1" DataIndex="test1" /> <ext:Column Header="Test2" DataIndex="test2" /> </Columns> </ColumnModel> <View> <ext:GroupingView runat="server"> <GetRowClass Fn="getRowClass" /> </ext:GroupingView> </View> </ext:GridPanel> </body> </html>

Thanks for the reply.
How would you make this work without hard coding the groups in the CSS?

In my case, group1 and group2 are not known. My groups are a list of changing dates and I do not know what they are in advance. I can not hard code them.

Quote:

Originally Posted by Daniil

Hi,

I would use GetRowClass.
http://docs.sencha.com/ext-js/3-4/#!...od-getRowClass

Example

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) { Store store = this.GridPanel1.GetStore(); store.DataSource = new object[] { new object[] { "group1", "1", "1" }, new object[] { "group1", "11", "11" }, new object[] { "group1", "111", "111" }, new object[] { "group2", "2", "2" }, new object[] { "group2", "22", "22" }, new object[] { "group2", "222", "222" } }; store.DataBind(); } } </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 runat="server"> <title>Ext.NET Example</title> <script type="text/javascript"> var getRowClass = function (record, index, rowParams, store) { var cls = record.get(this.getGroupField()); return cls; }; </script> <style type="text/css"> .group1 { background-color: green; } .group2 { background-color: yellow; } </style> </head> <body> <ext:ResourceManager runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true"> <Store> <ext:Store runat="server" GroupField="groupId"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="groupId" /> <ext:RecordField Name="test1" /> <ext:RecordField Name="test2" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> </Store> <ColumnModel runat="server"> <Columns> <ext:Column Header="GroupId" DataIndex="groupId" /> <ext:Column Header="Test1" DataIndex="test1" /> <ext:Column Header="Test2" DataIndex="test2" /> </Columns> </ColumnModel> <View> <ext:GroupingView runat="server"> <GetRowClass Fn="getRowClass" /> </ext:GroupingView> </View> </ext:GridPanel> </body> </html>

You can register CSS on the fly.

Code:

Ext.net.ResourceMgr.registerCssClass("someClassId", ".class-name {background-color: red;}");

Thanks for your help. I found a work around for my date grouping feature. Below is my work around:

Code:

<script type="text/javascript"> var getRowClass = function(record, index, rowParams, store) { var cls = record.get(this.getGroupField()); var d = new Date(cls); var aDay = d.getDay(); switch (aDay) { case 0: cls = "clsSunday"; break; case 1: cls = "clsMonday"; break; case 2: cls = "clsTuesday"; break; case 3: cls = "clsWednesday"; break; case 4: cls = "clsThursday"; break; case 5: cls = "clsFriday"; break; case 6: cls = "clsSaturday"; break; } return cls; }; </script>

Quote:

Originally Posted by Daniil

You can register CSS on the fly.

Code:

Ext.net.ResourceMgr.registerCssClass("someClassId", ".class-name {background-color: red;}");

Here is the related thread for Ext.NET v2.
http://forums.ext.net/showthread.php?19816