Blazor DataGrid -- selective row styling on first render

[John Phillips]

Hi there,

RowDataBound works great when interacting with the grid so that I can set a CSS class on my row for the "active" record in the dataset. I always have an "active" record in the dataset (a property on the model) even before the Grid first renders. After I make a change, RowDataBound works perfectly, but I have to change something before that event fires. Can you help me understand how can I selectively style a particular row (similar to RowDataBound) when the Grid renders for the first time?

Thank you in advance!

[Vignesh Natarajan]

Hi John,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Can you help me understand how can I selectively style a particular row (similar to RowDataBound) when the Grid renders for the first time?” 

 

We have analyzed your query and we suspect that you want to style particular row based on Action property in datasource during the initial rendering. We can achieve your requirement using RowDataBound event and you get the record details in the event arguments.  

 

Refer the below code example.  

 

<SfGrid DataSource="@Orders"> 

    <GridEvents RowDataBound="RowDataBoundHandler" TValue="Order"></GridEvents>     

</SfGrid> 

  

<style> 

    .e-active { 

        background-color: greenyellow; 

    } 

  

    .e-inactive { 

        background-color: lightcoral; 

    } 

</style> 

  

@code{ 

    public List<Order> Orders { get; set; } 

    public void RowDataBoundHandler(RowDataBoundEventArgs<Order> args) 

    { 

        if (args.Data.Active) 

        { 

            args.Row.AddClass(new string[] { "e-active" }); 

        } 

        else 

        { 

            args.Row.AddClass(new string[] { "e-inactive" }); 

        } 

    } 

 

In the RowDataBound event, we have added specific class to particular row and defined specific styles to that class.  

 

Refer the below screenshot for your reference 

 

 

 

For your reference, we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/163465/ze/DataGrid-1037960135  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#rowdatabound  

 

Please get back to us if you have further queries or if we misunderstood your query.  

  

Regards, 

Vignesh Natarajan