Alternate row color based on a column value

[Harjot]

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.

[Eyup]

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

[Chris]

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

 

Thank you

[Harjot]

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

[Eyup]

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

[Chris]

Thanks for posting.  This was helpful.