Change cell background color durign edit in batch mode

[Marco]

Hi Support,

we have a blazor datagrid in which we have set the Batch editing mode and enter editing with the single click. We would like to modify the Customer Name column, setting the RED value and make the Order ID column assume a red background as soon as we move to the next cell of the row, before calling the "End Edit" update function. it's possible?

Changing background color is an example. Our mail goal is to refresh the row UI data when we change the focus to the next cell to edit, without refreshing the entire datagrid view.

During edit screen

when we change the edit cell (before saving changes, without pushing "EndEdit" button) we want the red background in Order Id like the following screenshot.

Attachment: AllowEditing_3aac642b.7z

[Vignesh Natarajan]

Hi Marco, 

 

Thanks for contacting Syncfusion support.  

 

Query: “Our mail goal is to refresh the row UI data when we change the focus to the next cell to edit, without refreshing the entire datagrid view.” 

 

We have analyzed your query and we are understand you want to apply styles (background) UI to that particular column. We have achieve your requirement by calling a JavaScript function in CellSaved event by passing the row and column index. In the JavaScript method,  based on row and column index. We have applied styles to that column.  

 

Refer the below code example.  

 

<SfGrid @ref="@myGrid" DataSource="@Orders" @onkeyup="KeyUp" AllowPaging="true"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" ShowConfirmDialog="false"></GridEditSettings> 

    <GridEvents TValue="Order" RowSelected="RowSelected" 

                CellSelected="CellSelectHandler" 

                OnCellEdit="OnCellEdit" 

                CellSaved="CellSaved" 

                QueryCellInfo="CustomizeCell"></GridEvents> 

    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn AllowEditing="@CanOrderDate" Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

@code{ 

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

    public SfGrid<Order> myGrid { get; set; } 

  

    public bool CanOrderDate { get; set; } = true; 

    public bool CanOrderFreight { get; set; } = true; 

  

    public async Task CellSaved(CellSaveArgs<Order> args) 

    { 

        if (args.ColumnName == "CustomerID") 

        { 

            //find the row index 

            var rowIndex = await myGrid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 

            //find the column index 

            var colIndex = myGrid.Columns.Select(x => x.Field).ToList().IndexOf("OrderID"); 

            if (args.Value.ToString().ToLower() == "red") 

            { 

                await Runtime.InvokeVoidAsync("highlightcell", myGrid.ID, rowIndex, colIndex); 

            } 

            else 

            { 

                await Runtime.InvokeVoidAsync("removehighlight", myGrid.ID, rowIndex, colIndex); 

            } 

        } 

        CanOrderDate = false; 

        CanOrderFreight = false; 

    } 

 

[javascript.js] 

 

function highlightcell(gridId, row, col) {    document.getElementById(gridId + "_content_table").querySelectorAll("tr.e-row")[row].querySelectorAll("td")[col].style.background = "red";} function removehighlight(gridId, row, col) {    document.getElementById(gridId + "_content_table").querySelectorAll("tr.e-row")[row].querySelectorAll("td")[col].style.background = "";}

 

 

[host.cshtml] 

 

<head>    <meta charset="utf-8" />    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />    <script src="~/JavaScript.js"></script></head>

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/165039/ze/AllowEditing692428170  

 

Please get back to us with more details if you have further queries.   

  

Regards, 

Vignesh Natarajan   

 

[Marco]

Hi Marco, 

 

Thanks for contacting Syncfusion support.  

 

Query: “Our mail goal is to refresh the row UI data when we change the focus to the next cell to edit, without refreshing the entire datagrid view.” 

 

We have analyzed your query and we are understand you want to apply styles (background) UI to that particular column. We have achieve your requirement by calling a JavaScript function in CellSaved event by passing the row and column index. In the JavaScript method,  based on row and column index. We have applied styles to that column.  

 

Refer the below code example.  

 

<SfGrid @ref="@myGrid" DataSource="@Orders" @onkeyup="KeyUp" AllowPaging="true"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" ShowConfirmDialog="false"></GridEditSettings> 

    <GridEvents TValue="Order" RowSelected="RowSelected" 

                CellSelected="CellSelectHandler" 

                OnCellEdit="OnCellEdit" 

                CellSaved="CellSaved" 

                QueryCellInfo="CustomizeCell"></GridEvents> 

    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn AllowEditing="@CanOrderDate" Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

@code{ 

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

    public SfGrid<Order> myGrid { get; set; } 

  

    public bool CanOrderDate { get; set; } = true; 

    public bool CanOrderFreight { get; set; } = true; 

  

    public async Task CellSaved(CellSaveArgs<Order> args) 

    { 

        if (args.ColumnName == "CustomerID") 

        { 

            //find the row index 

            var rowIndex = await myGrid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 

            //find the column index 

            var colIndex = myGrid.Columns.Select(x => x.Field).ToList().IndexOf("OrderID"); 

            if (args.Value.ToString().ToLower() == "red") 

            { 

                await Runtime.InvokeVoidAsync("highlightcell", myGrid.ID, rowIndex, colIndex); 

            } 

            else 

            { 

                await Runtime.InvokeVoidAsync("removehighlight", myGrid.ID, rowIndex, colIndex); 

            } 

        } 

        CanOrderDate = false; 

        CanOrderFreight = false; 

    } 

 

[javascript.js] 

 

function highlightcell(gridId, row, col) {    document.getElementById(gridId + "_content_table").querySelectorAll("tr.e-row")[row].querySelectorAll("td")[col].style.background = "red";} function removehighlight(gridId, row, col) {    document.getElementById(gridId + "_content_table").querySelectorAll("tr.e-row")[row].querySelectorAll("td")[col].style.background = "";}

 

 

[host.cshtml] 

 

<head>    <meta charset="utf-8" />    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />    <script src="~/JavaScript.js"></script></head>

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/165039/ze/AllowEditing692428170  

 

Please get back to us with more details if you have further queries.   

  

Regards, 

Vignesh Natarajan   

 

Hi,
thanks for support.
We tried your sample and we are able to change cell color.

But, there is a problem. To reproduce it we follow the steps:

1- set "RED" to Customer Name -> the Order ID cella changes background to red color;

2- change table page
the row cell remains in RED background even if the data changed, and we lose Customer Name changes to previous data row.

Another question:

we would change programmatically value of freight column when we set "123" value in Customer Name and press "TAB". How can we do it without changing the value from DOM, and without calling Refresh grid method (that causes exiting from Batch edit )?

Thank you for support

Best Regards

Marco

[Vignesh Natarajan]

Hi Marco, 

 

Thanks for the update.  

 

Query: “the row cell remains in RED background even if the data changed, and we lose Customer Name changes to previous data row.” 

 

We have analyzed the reported query and we are also able to reproduce the reported behavior at our end. We would like to inform you that, it is default behavior of the Grid to cancel the batch changes when performing data operation in Grid. Hence updated value is not maintained while navigating between Grid pages. But highlighted cell gets maintaining is the issue. So we have modified the solution to highlight the cell based on the batch changes in CellSaved event and OnActionBegin event.   

 

OnActionBegin event will be triggered when certain action gets initiated. In that event when paging action is initiated, we have checked for any updated records has red value and called method to remove the highlight from the cell.   

 

Kindly refer the below modified code example.  

 

<SfGrid @ref="@myGrid" DataSource="@Orders" @onkeyup="KeyUp" AllowPaging="true">    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" ShowConfirmDialog="false"></GridEditSettings>    <GridEvents TValue="Order" RowSelected="RowSelected"                CellSelected="CellSelectHandler"                OnCellEdit="OnCellEdit"                CellSaved="CellSaved"                QueryCellInfo="CustomizeCell" OnActionBegin="ActionBeginHandler"></GridEvents>    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings>. . .. . .</SfGrid>@code{    public List<Order> Orders { get; set; }    public SfGrid<Order> myGrid { get; set; }     public bool CanOrderDate { get; set; } = true;    public bool CanOrderFreight { get; set; } = true;     public async Task ActionBeginHandler(ActionEventArgs<Order> Args)    {        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Paging)        {            //check for batch changes            var BatchChanges = await myGrid.GetBatchChanges();            var UpdatedRecords = BatchChanges.ChangedRecords;            //check whether any updated records has red as the customerID value            if (UpdatedRecords.Count > 0 && UpdatedRecords?.Any(x => x.CustomerID.ToLower() == "red") == true)            {                foreach (var rec in UpdatedRecords.Where(x => x.CustomerID.ToLower() == "red"))                {                    // call method to remove the higlight                    await HighCell("removehighlight", rec.OrderID);                }            }        }    }     public async Task HighCell(string action, int? PrimaryKey)    {        //find the row index        var rowIndex = await myGrid.GetRowIndexByPrimaryKey(PrimaryKey);        //find the column index        var colIndex = myGrid.Columns.Select(x => x.Field).ToList().IndexOf("OrderID");        // call this method to make interop call and highlight the cell        await Runtime.InvokeVoidAsync(action, myGrid.ID, rowIndex, colIndex);     }     public async Task CellSaved(CellSaveArgs<Order> args)    {        if (args.ColumnName == "CustomerID")        {            //find the row index            var rowIndex = await myGrid.GetRowIndexByPrimaryKey(args.RowData.OrderID);            //find the column index            var colIndex = myGrid.Columns.Select(x => x.Field).ToList().IndexOf("OrderID");            if (args.Value.ToString().ToLower() == "red")            {                await HighCell("highlightcell", args.RowData.OrderID);            }            else            {                await HighCell("removehighlight", args.RowData.OrderID);            }            //update the other columns without change the dom or refreshing            await myGrid.UpdateCell(rowIndex, "OrderDate", DateTime.Now);            await myGrid.UpdateCell(rowIndex, "Freight", (double)99);        }        CanOrderDate = false;        CanOrderFreight = false;    }

 

 

Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165039/ze/AllowEditing-1341338671  

 

Refer our UG documentation for your reference 

 

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

 

Query2: “How can we do it without changing the value from DOM, and without calling Refresh grid method (that causes exiting from Batch edit )?” 

 

We have analyzed your query and we suggest you to achieve your requirement using UpdateCell() method of the Grid. Refer the below cod example for your reference. 

 

public async Task CellSaved(CellSaveArgs<Order> args) 

    { 

        if (args.ColumnName == "CustomerID") 

        { 

            //find the row index 

            var rowIndex = await myGrid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 

            . . . . . .  

            //update the other columns without change the dom or refreshing 

            await myGrid.UpdateCell(rowIndex, "OrderDate", DateTime.Now); 

            await myGrid.UpdateCell(rowIndex, "Freight", (double)99); 

        } 

        CanOrderDate = false; 

        CanOrderFreight = false; 

    } 

 

  

Refer the sample attached in above query for your reference 

 

Also refer the below API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCell_System_Double_System_String_System_Object_  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan