1. Home
  2. Forum
  3. Blazor
  4. row color based on status

row color based on status

Dear support,

i havethe following grid code. is it possible to colorise rows based on 

.ActivityStatus. e.g when Activity.Status="COMPLETED" make the row green, when Acivity.Status="INPROGRESS" then make row red etc.etc.

can you provide a sample code snipset?

thanks

****

    <SfGrid DataSource="@VisitActivityObjects" AllowSorting="true" AllowFiltering="true" EnableVirtualization="true" EnableVirtualMaskRow="true" Height="800px" Width="100%">

        <GridPageSettings PageSize="50"></GridPageSettings>

        <GridColumns>

            <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>

            <GridColumn Field=@nameof(MyApp.Model.VisitActivity.ActivityStatus) HeaderText="Status" TextAlign="TextAlign.Left" IsIdentity="true" AutoFit="true" AllowSorting="true" AllowFiltering="true" FilterSettings="@(new FilterSettings{ Operator = Operator.StartsWith })"></GridColumn>


3 Replies
RN Rahul Narayanasamy Syncfusion Team June 28, 2021 05:48 AM UTC

Hi DAN, 
 
Greetings from Syncfusion. 
 
Query: row color based on status - .ActivityStatus. e.g when Activity.Status="COMPLETED" make the row green, when Acivity.Status="INPROGRESS" then make row red etc.etc. can you provide a sample code snipset? 
 
We have validated your query and you want to customize the row color based on the row values. You can achieve your requirement by using RowDataBound event of the Grid. Find the below code snippets and sample for your reference. 
 
 
<SfGrid DataSource="@Orders" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="110"> </GridColumn> 
        <GridColumn Field=@nameof(Order.ActivityStatus) HeaderText="Activity Status" Width="110"></GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
<style> 
 
    .progress-in { 
        background-color: red; 
    } 
 
    .complete { 
        background-color: greenyellow 
    } 
</style> 
 
@code { 
 
    public List<Order> Orders { get; set; } 
 
    . . . 
 
    public void RowBound(RowDataBoundEventArgs<Order> args) 
    { 
        if (args.Data.ActivityStatus == "COMPLETED") 
        { 
            args.Row.AddClass(new string[] { "complete" }); 
        } 
        else if (args.Data.ActivityStatus == "INPROGRESS") 
        { 
            args.Row.AddClass(new string[] { "progress-in" }); 
        } 
    } 
} 
  
 
 
Please let us know if you have any concerns. 
 
Regards, 
Rahul 


SA Salvatore October 10, 2021 11:04 AM UTC

hi, i have a similar problem and the suggested solution works but only with the background-color. If I try to change the color in the css style it doesn't work and always remains black. 

is it possible to change the color and not the background-color? 

waiting for, greetings


RN Rahul Narayanasamy Syncfusion Team October 11, 2021 01:39 PM UTC

Hi Salvatore, 

Greetings from Syncfusion. 

We have validated your query and you want to change the text color of the row. You can achieve your requirement by using RowDataBound event with the below CSS. Find the below code snippets and sample for your reference. 


 
<SfGrid DataSource="@Orders" EnableHover=false AllowSelection=false Height="280"> 
    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
<style> 
 
   .e-grid .e-row.below-35 .e-rowcell { 
        color: yellow; 
    } 
 
    .e-grid .e-row.below-25 .e-rowcell {   //use this class  
        color: blue; 
    } 
 
    .e-grid .e-row.above-35 .e-rowcell {    //use this class 
        color: red; 
    } 
</style> 
 
@code { 
 
    . . . 
 
    public void RowBound(RowDataBoundEventArgs<Order> args) 
    { 
        if (args.Data.Freight < 25) 
        { 
            args.Row.AddClass(new string[] { "below-25" });  //changed text color of the row 
        } 
        else if (args.Data.Freight < 35) 
        { 
            args.Row.AddClass(new string[] { "below-35" });   //changed row text color of the row 
        } 
        else 
        { 
            args.Row.AddClass(new string[] { "above-35" });   //changed text color of the row 
        } 
    } 
} 

Reference: 


Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon