This is a migrated thread and some comments may be shown as answers.

Styling Group Header Items

5 Answers 311 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mark asked on 24 Feb 2012, 03:59 PM

Hi. I'm new to Telerik Controls. I recently joined a company that uses these controls religiously, and am happy to say that I really like working with them.
HOWEVER, i have a bit of an issue with some styling needs. I've surfed around the forums looking for some tidbits of information on how to style the group headers (found this one - fairly helpful to a point.)
What I need to do is each group header item has to be a different color, and I was going to us a SWITCH (Case) statement to make the color choices.

Can some one assist with what I may be doing wrong?

I'm populating the grid with a datatable and want to style the group headers within the same function - because of the use of some variables. I know my placement of the styling is off. So, if someone could point out the error of my ways and help me to correct it, It'd be much appreciated.

Thanks in advance

(ps, there's more code showing where the data is actually coming from - I didn't post it because I didn't think it was pertinent to this portion.... thanks again.)

dataTable = db.StoredProcedures.FlashDataTable(strFyStartDate, strFyEndDate, strCntrStartDate, strCntrEndDate);

string strProfName = "";

string strEventProfileContact = dataTable.Rows[0]["EventProfileContact"].ToString();

foreach (DataRow dRow in dataTable.Rows)

{

if(strProfName != strEventProfileContact)

{

dRow["EventProfileContact"] = dataTable.Rows[0]["EventProfileContact"].ToString();

foreach (GridGroupHeaderItem groupHeader in reportView.MasterTableView.GetItems(GridItemType.GroupHeader))

{

string evProfCont = dataTable.Rows[0]["EventProfileContact"].ToString();

switch (evProfCont)

{

case "Person1 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#9DB232");

break;

case "Person2 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#737CA1");

break;

case "Person3 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#8467D7");

break;

case "Person4 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#79BAEC");

break;

case "Person5 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#C12267");

break;

case "Person6 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#32B29C");

break;

case "Person7 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#F88017");

break;

case "Person8 Name":

groupHeader.BackColor = System.Drawing.ColorTranslator.FromHtml("#ADA96E");

break;

}

dRow["RebateID"] = dataTable.Rows[0]["RebateID"].ToString();

dRow["PromoName"] = dataTable.Rows[0]["PromoName"].ToString();

dRow["StartDate"] = dataTable.Rows[0]["StartDate"].ToString();

dRow["EndDate"] = dataTable.Rows[0]["EndDate"].ToString();

dRow["FinalDate"] = dataTable.Rows[0]["FinalDate"].ToString();

dRow["WTDNoOfRBTs"] = dataTable.Rows[0]["WTDNoOfRBTs"].ToString();

dRow["WTDAvgPERRBT"] = dataTable.Rows[0]["WTDAvgPERRBT"].ToString();

dRow["WtdTtlDOLLARS"] = dataTable.Rows[0]["WtdTtlDOLLARS"].ToString();

dRow["FY#OfRBTs"] = dataTable.Rows[0]["FY#OfRBTs"].ToString();

dRow["FyAVG$PerRBT"] = dataTable.Rows[0]["FyAVG$PerRBT"].ToString();

dRow["FyTtlDOLLARS"] = dataTable.Rows[0]["FyTtlDOLLARS"].ToString();

dRow["BudgetAmount"] = dataTable.Rows[0]["BudgetAmount"].ToString();

dRow["VarianceTOBudget"] = dataTable.Rows[0]["VarianceTOBudget"].ToString();

dRow["EndingBudgetFY2011"] = dataTable.Rows[0]["EndingBudgetFY2011"].ToString();

}

strProfName = strEventProfileContact;

}

reportView.DataSource = dataTable;

reportView.DataBind();

5 Answers, 1 is accepted

Accepted

answered on 29 Feb 2012, 03:16 PM

Hello Mark,

Perhaps the easiest way to achieve this is by using the CssClass property and use the corresponding class in the CSS, e.g.

<style type="text/css">

.RadGrid_Default th.AmandaColganColumn

{

background: #9db232;

}

.RadGrid_Default th.BarbaraJirkaColumn

{

background: #737ca1;

}

</style>

<telerik:RadGrid ID="RadGrid1" Visible="true" runat="server">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Amanda_Colgan" HeaderText="Amanda Colgan">

<HeaderStyle CssClass="AmandaColganColumn" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Barbara_Jirka" HeaderText="Barbara Jirka" HeaderStyle-CssClass="BarbaraJirkaColumn"/>

.....

</Columns>

</MasterTableView>

</telerik:RadGrid>

I hope this helps.

All the best,
Galin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 29 Feb 2012, 08:06 PM

That's cool, but, not all of them will be present at any given time.

I tried implementing this (found on another page) but it doesn't work... any suggestions?

foreach (GridGroupHeaderItem groupHeader in reportView.MasterTableView.GetItems(GridItemType.GroupHeader))

{

dRow["EventProfileContact"] = dataTable.Rows[0]["EventProfileContact"].ToString();

if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person1 Name")

{

//groupHeader.CssClass = "rgGroupHeaderAmanda";

groupHeader.Style.Add("Background-Color", "#9DB232");