Change cell background color when another cell is modified

[David González Martínez]

Hi. I need to change the background color of a cell based on the value of another cell (selecting the value from a combobox). The grid is in batch edit mode. I mean;

- Cell 1: combobox cell

- Cell 2: textbox cell

- When I change the value in Cell 1 I need to change the background color of Cell 2.

The problem is that the QueryCellInfo event does not trigger until I click on grid "Save" button and I need to change the color after Cell 1 value is modified.

How could I do that?

Thanks!

[Monisha Saravanan]

Hi David,

Greetings from Syncfusion support.

Query: “I need to change the background color of a cell based on the value of another cell (selecting the value from a combobox). The grid is in batch edit mode.”

After reviewing your request, we have implemented a JavaScript solution that uses the OnCellSave handler which trigger when a value is changed using Batch mode. By passing the row and cell index using javascript interop, we were able to apply colors to the nearby cell. This same approach can also be used to handle and apply colors to cells as per your requirements.

Kindly check the attached code snippet and sample for your reference.

 

<SfGrid @ref="_pickOrderGrid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315">

    <GridEvents OnCellSave="CellSaveHandler" TValue="Order"></GridEvents>

  

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

            <EditTemplate>

                <SfComboBox ID="ShipCountry" TItem="Country" TValue="string" @bind-Value="@((context as Order).ShipCountry)" DataSource="@Countries">

                    <ComboBoxFieldSettings Value="CountryName" Text="CountryName"></ComboBoxFieldSettings>

                  

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

        

    </GridColumns>

</SfGrid>

 

@code {

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

 

    SfGrid<Order> _pickOrderGrid { get; set; }

    public async Task CellSaveHandler(CellSaveArgs<Order> args)

    {

        var ColumnIndex = await _pickOrderGrid.GetColumnIndexByFieldAsync(args.ColumnName);

        var rowindex = await _pickOrderGrid.GetRowIndexByPrimaryKeyAsync(args.RowData.OrderID);

        var index = args.ColumnObject.Index + 1;

        JSInterop.InvokeVoidAsync("highlightHeader",index, rowindex);

      

    }

  

}

highlightHeader = function (colIndex, rowindex) {

    var a = document.getElementsByClassName("e-row")[rowindex];

    var b = a.getElementsByClassName('e-rowcell')[colIndex].style.backgroundColor = "pink";

 

};

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~11247359946.zip

Please let us know if you have any concerns.

Regards,

Monisha