Change Row backcolor when a specific column is updated

[Baba Goud]

Hello team,

I am working on a Blazor datagrid requirement where, when the user updates a specific column the backcolor of the row belonging to the cell being updated should be changed dynamically.

For eg: I have the below grid. When the user edits the cell value of the OrderDate column and updates the database by hitting on update button on the toolbar i want to change the backcolor of the row to say green or blue.

Currently the Edit mode of the grid is Normal. For your reference the Datagrid in Razor component as below.

<SfGrid DataSource="@SalesOrdersList" AllowPaging="true" AllowSorting="true" AllowGrouping="true" ID="SalesGrid" GridLines="GridLine.Both"  AllowFiltering="true" @ref="salesOrdersGrid" AllowTextWrap="true" AllowExcelExport="true" AllowPdfExport="true" PrintMode=PrintMode.CurrentPage Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel","Search", "Print", "PdfExport", "ExcelExport" })" Height="100%" Width="100%">

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" />

        <GridEvents OnActionBegin="@ActionBeginHandler" TValue="@SalesOrders"            OnToolbarClick="ToolbarClickHandler"  QueryCellInfo="CustomizeCell" ></GridEvents>

              <GridColumns>

            <GridColumn IsPrimaryKey="true" Field=@nameof(SalesOrders.SalesOrdersID) HeaderText="ID" Width="40px" Visible="false" AllowAdding="false"> </GridColumn>

            <GridColumn Field=@nameof(SalesOrders.WorkCenter) HeaderText="Work Center" Width="150px"></GridColumn>

            <GridColumn Field=@nameof(SalesOrders.FW) HeaderText="FW" Width="100px"></GridColumn>

            <GridColumn Field=@nameof(SalesOrders.OrderDate) HeaderText="Order Date" Width="150px" DefaultValue="@(DateTime.Now)"

                        EditType="EditType.DateTimePickerEdit" Format="d" Type="ColumnType.Date"></GridColumn>

            <GridColumn Field=@nameof(SalesOrders.SalesOrderNumber) HeaderText="Sales Order Number" Width="150px">

            </GridColumn>

</GridColumns>

    </SfGrid>

Thanks

Baba

[Renjith Singh Rajendran]

Hi Baba, 

 

Greetings from Syncfusion support. 

 

Query : i want to change the backcolor of the row to say green or blue. 

We have bind the OnActionBegin event. In this event handler based on the RequestType as Save we have stored the primary key column value to a List. Now use this stored List value for applying the styles inside RowDataBound event handler. 

 

We have also prepared a sample based on your requirement. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp469466248 

References :  

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

https://blazor.syncfusion.com/documentation/datagrid/row#customize-rows  

https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing 

 

 

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

 

    public void OnActionBegin(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Action.Save) && args.Action == "Edit") 

        { 

            //store the primary key on save 

            EditedCells.Add(args.Data.OrderID); 

        } 

    } 

    public void RowDataBound(RowDataBoundEventArgs<Order> args) 

    { 

        //check based on stored list and apply style for corresponding edited row 

        if (EditedCells.Count != 0) 

        { 

            if (EditedCells.Contains(args.Data.OrderID)) 

            { 

                    args.Row.AddClass(new string[] { "editedcellcss" });                     

            } 

        } 

    } 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R 

[Baba Goud]

Hello Renjith,

Appreciate for providing a quick reply, the above code worked as expected, thank you!

Thanks,

Baba

[Renjith Singh Rajendran]

Hi Baba, 

 

Thanks for your update. Please get back to us if you need further assistance. 

 

Regards, 

Renjith R