Alternate Row colour depending on Cell Value

1 Answer 64 Views
Grid
Rakhee
Top achievements
Rank 1
Iron
Iron
Rakhee asked on 10 May 2023, 01:01 PM | edited on 10 May 2023, 02:23 PM

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

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 15 May 2023, 11:35 AM

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

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Tags
Grid
Asked by
Rakhee
Top achievements
Rank 1
Iron
Iron
Answers by
Doncho
Telerik team
Share this question
or