Alternate row color based on a column value

6 posts, 1 answers
  1. Harjot
    Harjot avatar
    2 posts
    Member since:
    Apr 2014

    Posted 24 Oct 2015 Link to this post

    Hey guys,

     Is there a quick way to set the alternate row color based on a column value? For example: if I have 10 rows, and the first 3 belong to user ABC, next 5 belong to DEF and last 2 belong to GHI, Instead of having every row alternate, I'd like for the rows belonging to user ABC behave as NormalItem, then the rows belonging to DEF user as AlternatingItem and for GHI again as NormalItem.

    This whole expected behaviour of Normal and AlternatingItem conflicts with the odd/even rules as per this doc but business rules win the case every time.

    I can add some logic in the ItemDataBound event and set the CSS classes there, but am wondering if there is a better/efficient way to do it.

  2. Answer
    Eyup
    Admin
    Eyup avatar
    3647 posts

    Posted 28 Oct 2015 Link to this post

    Hello Harjot,

    I've already replied to this query in your ticket with ID: 982081. I suggest that we continue our conversation on the mentioned thread.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Chris
    Chris avatar
    3 posts
    Member since:
    Mar 2013

    Posted 22 Jan 2016 in reply to Eyup Link to this post

    I am interested in this exact same scenario. Do you have an answer I can view?

     

    Thank you

  4. Harjot
    Harjot avatar
    2 posts
    Member since:
    Apr 2014

    Posted 22 Jan 2016 in reply to Chris Link to this post

    Hey Chris,

     I'm including the reply I got from Eyup below; I tried the second approach with some additional custom logic and it worked.

    What worked for me:

    RequestId is the identifier that I want to group all the background colors with.

    I have some additional custom logic so it works with modulus check.

    protected void gridRequests_ItemDataBound(object sender, GridItemEventArgs e)

    {

     ...

    if (e.Item is GridDataItem)
    {
    GridDataItem dataItem = e.Item as GridDataItem;
    setCssClass(dataItem);

    }

    ...

    }

    private void setCssClass(GridDataItem item)
    {

    int requestId = Convert.ToInt32(item.GetDataKeyValue("RequestId").ToString());
    item.CssClass = distinctRequestIdList.IndexOf(requestId) % 2 == 0 ? "rgRow" : "rgAltRow";
    }

     

    Telerik's reply (I used the second approach):

    Hi Harjot,

    Thank you for contacting us.

    Your reasoning is absolutely correct. Since your requirement demands that there will be several different highlighted groups, and not only two repeating item types, modifying the alternating rows won't be enough and you should use the ItemDataBound event handler:

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
         item.BackColor = System.Drawing.Color.LightBlue;
        }
    }
    You can also try the following approach:

    GridDataItem item = e.Item as GridDataItem;
    string orgClass = e.Item.ItemIndex % 2 == 0 ? "rgRow" : "rgAltRow";
    item.CssClass = orgClass + " customClassName";
    CSS:

    <style type="text/css">
        .RadGrid tr.customClassName {
            background-color: yellow;
        }

        div.RadGrid tr.rgSelectedRow {
            background-color: #828282;
        }
    </style>
    Hope this helps. Please give it a try and let me know if it works for you.

    Regards,
    Eyup
    Telerik

  5. Eyup
    Admin
    Eyup avatar
    3647 posts

    Posted 27 Jan 2016 Link to this post

    Hi Harjot,

    Thank you for sharing this approach with our community. I hope it will prove helpful to other developers as well.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Chris
    Chris avatar
    2 posts
    Member since:
    Jun 2018

    Posted 10 Oct 2018 in reply to Harjot Link to this post

    Thanks for posting.  This was helpful.
Back to Top