We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Change cell background color when another cell is modified

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!


1 Reply

MS Monisha Saravanan Syncfusion Team January 20, 2023 04:58 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon