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

Alternate row color based on a column value

5 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Harjot
Top achievements
Rank 1
Harjot asked on 24 Oct 2015, 06:23 AM

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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 28 Oct 2015, 02:06 PM
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
0
Chris
Top achievements
Rank 1
answered on 22 Jan 2016, 02:18 PM

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

 

Thank you

0
Harjot
Top achievements
Rank 1
answered on 22 Jan 2016, 03:03 PM

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

0
Eyup
Telerik team
answered on 27 Jan 2016, 11:54 AM
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
0
Chris
Top achievements
Rank 1
answered on 10 Oct 2018, 03:39 PM
Thanks for posting.  This was helpful.
Tags
Grid
Asked by
Harjot
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Chris
Top achievements
Rank 1
Harjot
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or