While editing update other columns

[Rick Maldonado]

I'm working with a grid that displays purchase order lines. One column is the Item Number, which uses an edit template with a DropDownList control. Another column is the Item Description, which is read-only.

When I select an item from the dropdown and the cell updates, I expect the corresponding description to change automatically. I’ve confirmed via a breakpoint that the new description string is being set correctly in the property, but the UI does not reflect the change until I fully update the row.

I’ve tried several approaches and event hooks to trigger the UI refresh, but none seem to work. I’m also calculating a value based on Cost * Quantity, and that too only updates visually after a full row update.

Has anyone encountered this behavior or found a reliable way to force the UI to reflect these changes immediately?

Attached is the code for reference.

Thanks in advance!

Attachment: SF_Issue_b5acf0cf.zip

[Prathap Senthil]

Hi Rick,

Based on your requirement to reflect the UI total value, we suggest using the Edit Template feature to achieve this in the following way: you can automatically update the value of a column based on the edited value of another column using the Cell Edit Template feature.

 

   <GridColumn Field="@(nameof(PurchaseOrderDetail.Quantity))" HeaderText="Qty" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Format="N2" Width="120">

       <EditTemplate>

           @{

               var data = context as PurchaseOrderDetail;

 

               <SfNumericTextBox ID="Quantity" @ref="UnitsInStockReference" @[email protected] TValue="decimal">

                   <NumericTextBoxEvents TValue="decimal" ValueChange="@ValueChangeHandler"></NumericTextBoxEvents>

               </SfNumericTextBox>

           }

       </EditTemplate>

   </GridColumn>

   <GridColumn Field="@(nameof(PurchaseOrderDetail.UnitPrice))" HeaderText="Unit Price" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140">

       <EditTemplate>

           @{

               var data = context as PurchaseOrderDetail;

 

               <SfNumericTextBox ID="UnitPrice" @ref="UnitPriceReference" @[email protected] TValue="decimal">

                   <NumericTextBoxEvents TValue="decimal" ValueChange="@ValueChangeHandler"></NumericTextBoxEvents>

               </SfNumericTextBox>

           }

       </EditTemplate>

   </GridColumn>

   <GridColumn Field="@(nameof(PurchaseOrderDetail.TotalPrice))" HeaderText="Total" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false" AllowAdding="false" Width="140">

       <EditTemplate>

           @{

 

 

               <SfNumericTextBox ID="TotalPrice" Value=@TotalValue Enabled="false" TValue="decimal"></SfNumericTextBox>

           }

       </EditTemplate>

   </GridColumn>

 

@code
{

    SfNumericTextBox<decimal> UnitPriceReference;

    SfNumericTextBox<decimal> UnitsInStockReference;

public decimal TotalValue { get; set; }

 

 

private void ValueChangeHandler(ChangeEventArgs<decimal> args)

{

     TotalValue = Convert.ToDecimal(UnitPriceReference.Value * UnitsInStockReference.Value);

 

     GridRef?.PreventRender(false);

      

 }
}

Sample: https://blazorplayground.syncfusion.com/embed/BZryMZtAelhsPiHR?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference: Inline Editing in Blazor DataGrid | Syncfusion

Based on your code snippet, we would like to clarify that the CellSaved event is only supported in Batch Edit mode. This is the default behavior of the Grid component.

The reason for this is that Batch Editing and Normal/Dialog Editing modes have different operational behaviors:

• In Batch Editing, the focus is on individual cells.
• In Normal or Dialog Editing, the Grid operates on a row-based model, where the entire row is edited at once.

For your reference, we have listed the supported events for both Normal/Dialog and Batch editing modes.

Additionally, we would like to inform you that your current approach is valid. However, please note that the OnActionBegin and OnActionComplete events for CRUD operations will soon be deprecated. We have introduced dedicated events for each CRUD operation, and it is recommended to handle specific actions using these new events.

Note: Using both the OnActionBegin and OnActionComplete events along with separate events for CRUD operations simultaneously is not the correct approach.

     <GridEvents TValue="PurchaseOrderDetail"

@*   OnActionBegin="ActionBeginHandler"

   CellSaved="CellSavedHandler" *@

   RowEditing="EditingHandler"

   RowEdited="EditedHandler"

   RowUpdating="UpdateHandler"

   RowCreated="CreatedHandler" />

 

Events triggered on Normal /Dialog editing:

References:

• RowUpdating Event
• RowUpdated Event
• RowDeleting Event
• RowDeleted Event
• RowCreating Event
• RowCreated Event

Event Name	Argument Name	Properties	Description
RowCreating	RowCreatingEventArgs	Cancel, Data, Index, EditContext	Gets or sets the event callback that is raised before the add action is performed in the grid.
RowCreated	RowCreatedEventArgs	Data, Index, EditContext	Gets or sets the event callback that is raised after the add action is performed in the grid.
RowUpdating	RowUpdatingEventArgs	Cancel, IsShiftKeyPressed, KeyCode, Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue	Gets or sets the event callback that is raised before the save action is performed in the grid.
RowUpdated	RowUpdatedEventArgs	Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue	Gets or sets the event callback that is raised after the save action is performed in the grid.
RowDeleting	RowDeletingEventArgs	Cancel, Datas, PrimaryKeys	Gets or sets the event callback that is raised before the delete action is performed in the grid.
RowDeleted	RowDeletedEventArgs	Datas, PrimaryKeys	Gets or sets the event callback that is raised after the delete action is performed in the grid.
EditCanceling	EditCancelingEventArgs	Cancel, Data, PreviousData, PrimaryKeys, Index	Gets or sets the event callback that is invoked before the cancel action is performed in the grid, specifically when using normal and dialog edit modes.
EditCanceled	EditCanceledEventArgs	Data, PreviousData, PrimaryKeys, Index	Gets or sets the event callback that is invoked after the cancel action is performed in the grid, specifically when using normal and dialog edit modes.
OnRowEditStart	OnRowEditStartEventArgs	Cancel, PreventDataClone	Gets or sets the event callback that is raised before an editing action is performed in the grid.
RowEditing	RowEditingEventArgs	Cancel, PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData	Gets or sets the event callback that is raised before the edit action is performed in the grid.
RowEdited	RowEditedEventArgs	PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData	Gets or sets the event callback that is raised after the edit action is performed in the grid.

Events triggered on Batch editing:

OnCellEdit – OnCellSave - CellSaved

OnBatchAdd – OnBatchSave – OnBatchDelete

Regards,
Prathap Senthil