Styling Group Header Items

6 posts, 1 answers
  1. Mark
    Mark avatar
    25 posts
    Member since:
    Feb 2012

    Posted 24 Feb 2012 Link to this post

    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();
  2. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 29 Feb 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    25 posts
    Member since:
    Feb 2012

    Posted 29 Feb 2012 Link to this post

    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");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#9DB232");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person2 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#737CA1");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#737CA1");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person3 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#8467D7");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#8467D7");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person4 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#79BAEC");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#79BAEC");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person5 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#C12267");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#C12267");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person6 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#32B29C");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#32B29C");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person7 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#F88017");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#F88017");
                            }
                            if (dRow["EventProfileContact"].ToString().ToUpper().Trim() == "Person8 Name")
                            {
                                groupHeader.Style.Add("Background-Color", "#ADA96E");
                                //reportView.GroupHeaderItemStyle.BackColor =
                                //    System.Drawing.ColorTranslator.FromHtml("#ADA96E");
                            }
                        }
  5. Mark
    Mark avatar
    25 posts
    Member since:
    Feb 2012

    Posted 01 Mar 2012 Link to this post

    I figured it out.  Originally, I was lazy and didn't want extra functions on my page, but - as it turned out, I needed to do it.
    So, I took the previous example (here) and did what I needed to do (also adding it to my grid onItemDataBound)... and it worked immediately.  Thanks for your suggestions. :-)

    protected void ReportView_ItemDataBound(object sender, GridItemEventArgs e)
        {
            foreach (GridGroupHeaderItem groupHeader in reportView.MasterTableView.GetItems(GridItemType.GroupHeader))
            {
                string strtxt = groupHeader.DataCell.Text.ToUpper().Trim();
                if (strtxt.Contains("Person1"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#9DB232");
                }
                else if (strtxt.Contains("Person2"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#737CA1");
                }
                else if (strtxt.Contains("ERIN"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#8467D7");
                }
                else if (strtxt.Contains("Person3"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#79BAEC");
                }
                else if (strtxt.Contains("Person4"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#C12267");
                }
                else if (strtxt.Contains("Person5"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#32B29C");
                }
                else if (strtxt.Contains("Person6"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#F88017");
                }
                else if (strtxt.Contains("Person7"))
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#ADA96E");
                }
                else
                {
                    groupHeader.BackColor = ColorTranslator.FromHtml("#FFFFFF");
                }
            }
        }
  6. Erin
    Erin avatar
    1 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2012 Link to this post

    Hi, could you please remove the people's actual names from your original post? This popped up in a Google search I just did on my name in an attempt to quell some recent privacy issues I've had. I don't think it's the best idea to have company employee's names popping up in a code inquiry posted on an unsecure online forum. Please remove this as soon as possible.

    Thank you,
    Erin V.
  7. Mark
    Mark avatar
    25 posts
    Member since:
    Feb 2012

    Posted 04 Jun 2012 Link to this post

    Sorry about that Erin....
    As I don't have control over taking it down, I edited my post(s) and took the names out.
    Please forgive me.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017