Alternate Row colour depending on Cell Value

[Rakhee]

I am using a RadGrid and when the grid populates I would like to use alternate row colour depending on the values of the Works Order number if the previous value is the same as the current row value. For example, I have the following rows below. I would like the row colour with WO 11222 to be "rgRow" and the WO with 45874 to be row colour "rgAltRow" then back to rgRow  for the next WO. So I basically want the alternate row colour to work on change of WO number.

Is there a way to achieve this please?

WO      Qty   Part

11222     3     XYZ

11222     4     XYZ

45874    1     UYH

45874   3     UYH

[Doncho]

Hi Rakhee,

The rgRow and rgAltRow are built-in class names added internally by the RadGrid. Instead of working with these class names you can use the ItemDataBound event of the RadGrid and assign custom class names to items and their cells as per custom logic and condition. That way you will be able to style rows based on the value of their cells.

Here is a complete sample showcasing my suggestion:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound">
</telerik:RadGrid>

C#

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = GetData();
}
private DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("WO", typeof(int)));
    dt.Columns.Add(new DataColumn("Qty", typeof(int)));
    dt.Columns.Add(new DataColumn("Part", typeof(string)));

    dt.Rows.Add(11222, 3, "XYZ");
    dt.Rows.Add(11222, 4, "XYZ");
    dt.Rows.Add(45874, 1, "XYZ");
    dt.Rows.Add(45874, 3, "XYZ");
    dt.Rows.Add(11222, 3, "XYZ");

    return dt;
}

int lastWO = 0;
bool altRow = false;
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        var dataItem = e.Item as GridDataItem;
        var currentWO = int.Parse(dataItem["WO"].Text);
        if (lastWO == 0) lastWO = currentWO;

        if (currentWO != lastWO)
        {
            lastWO = currentWO;
            altRow = !altRow;
        }

        if (altRow)
        {
            foreach (TableCell cell in dataItem.Cells)
            {
                cell.CssClass = "customAltRowCell";
            }
        }
        else
        {
            foreach (TableCell cell in dataItem.Cells)
            {
                cell.CssClass = "customRowCell";
            }
        }
    }
}

CSS

.RadGrid .customAltRowCell {
    background: #f2f2f2;
}

.RadGrid .customRowCell {
    background: #fff;
}

Kind regards,
Doncho
Progress Telerik