How Can i use math in Gridview when editing?

[Wen-Ting Zhuang]

When i change A OR B VALUE ，EQUEL CAN CHANGE TOO

Attachment: DaliyReport_DTY10_794203e0.rar

[Rahul Narayanasamy]

Hi Wen-Ting Zhuang, 

Greetings from Syncfusion. 

Query: How Can i use math in Gridview when editing? 

We have validated your query and you want to change other column values while editing. Here, we have prepared a sample based on your requirement using EditTemplate and action events(OnActionBegin and OnActionComplete). While changing the values in Freight1 and Freight2 columns, the corresponding values(Freight1 * Freight2) will be update in Total column. Find the below code snippets and sample for your reference. 

 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings> 

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

    <GridColumns> 

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

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

            <EditTemplate> 

                @{ 

                    var order = (context as Order); 

                    <SfNumericTextBox @ref="numeric1" ID="Freight1" TValue="double?" @bind-Value="@((context as Order).Freight1)" Format="c2"> 

                        <NumericTextBoxEvents TValue="double?" ValueChange="OnChange"></NumericTextBoxEvents> 

                    </SfNumericTextBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var order = (context as Order); 

                    <SfNumericTextBox @ref="numeric2" ID="Freight2" TValue="double?" @bind-Value="@((context as Order).Freight2)" Format="c2"> 

                        <NumericTextBoxEvents TValue="double?" ValueChange="OnChange2"></NumericTextBoxEvents> 

                    </SfNumericTextBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

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

            <Template> 

                @{ 

                    var order = (context as Order); 

                    order.Total = order.Freight1 * order.Freight2; 

                    <div>@order.Total</div> 

                } 

            </Template> 

            <EditTemplate> 

                @{ 

                    var order = (context as Order); 

                    <SfNumericTextBox ID="Total" TValue="double?" Value="@Value" Format="c2"> 

                    </SfNumericTextBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

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

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfNumericTextBox<double?> numeric1; 

    SfNumericTextBox<double?> numeric2; 

    public int? ItemCodeValue { get; set; } 

    public void OnActionComplete(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Action.BeginEdit) || args.RequestType.Equals(Action.Add)) 

        { 

            args.PreventRender = false; 

            Value = args.Data.Freight1 * args.Data.Freight2; 

        } 

    } 

    public void OnActionBegin(ActionEventArgs<Order> args) 

    { 

         

        if (args.RequestType.Equals(Action.Save)) 

        { 

            args.Data.Total = Value; 

        } 

    } 

    double? Value = 0; 

    bool Initial { get; set; } = true; 

    public async Task OnChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<double?> args) 

    { 

        Value = args.Value * numeric2.Value; 

    } 

    public async Task OnChange2(Syncfusion.Blazor.Inputs.ChangeEventArgs<double?> args) 

    { 

        Value = args.Value * numeric1.Value; 

    } 

    SfGrid<Order> Grid; 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/167316/ze/Sample-1171077395  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template 

Please let us know if you have any concerns. 

Regards,
Rahul