1. Home
  2. Forum
  3. Blazor
  4. Apply the multiplication of two column values in the grid to another column

Apply the multiplication of two column values in the grid to another column

Hi
I can't speak English. So I use Google Translate.
Please understand if the explanation is not natural.

There is a grid that uses batch mode.
The grid has columns'Quantity', 'Unit Price', 'Amount', and 'VAT'.
'Quantity' and'Unit Price' columns can be edited.
The 'Amount' and 'VAT' columns cannot be edited.

Query 1. When the 'Quantity' or 'Unit Price' column is edited, I must multiply the values of the two columns and set the value in the 'Amount' column.
Query 2. And I need to display the sum of the changed 'Amount' column in the div.
Query 3. Depending on whether the check box is checked or not, I must set 0 in the'VAT' column of all rows in the grid or calculate and reflect the VAT.

How can I do it?
Any help to me would be appreciated.

3 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team October 16, 2020 11:13 AM UTC

Hi JaeHyeong, 

Greetings from Syncfusion. 

Query 1. When the 'Quantity' or 'Unit Price' column is edited, I must multiply the values of the two columns and set the value in the 'Amount' column.  
Query 2. And I need to display the sum of the changed 'Amount' column in the div. 

We have validated your query and you want to calculate the values of two columns and save the calculated value in another column in batch editing. Here, we have achieved your requirement by using CellSaved event and UpdateCell method of the Grid.  

Here, we have prepared a sample based on your requirement. We have calculated the value for columns(Quantity and UnitPrice) and placed the value in Amount and Sum column. Find the below code snippets and sample for your reference. 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents CellSaved="CellSavedHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 
        . . . 
        <GridColumn Field=@nameof(Order.Amount) HeaderText="Amount" Format="C2" AllowEditing="false" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"> 
            <Template> 
                @{ 
                    var value = (context as Order);  
                    value.Amount = value.Quantity * value.UnitPrice; 
                    <span>@value.Amount</span>    //here we have calculated the values and shown at initial render 
                } 
            </Template> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.Sum) HeaderText="Sum" Format="C2" AllowEditing="false" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"> 
            <Template> 
                    @{ 
                        var value = (context as Order);  
                        value.Sum = value.Quantity + value.UnitPrice; 
                        <span>@value.Sum</span>  //here we have calculated the values and shown at initial render 
                    } 
                </Template> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . . . 
    public async Task CellSavedHandler(CellSaveArgs<Order> args) 
    { 
        var index = await Grid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 
        if (args.ColumnName == "Quantity") 
        { 
            await Grid.UpdateCell(index, "Amount", Convert.ToInt32(args.Value) * args.RowData.UnitPrice); 
            await Grid.UpdateCell(index, "Sum", Convert.ToInt32(args.Value) + args.RowData.UnitPrice);   //here, we have calculated the values and shown in particular cell in while editing  
        } 
        else if (args.ColumnName == "UnitPrice") 
        { 
            await Grid.UpdateCell(index, "Amount", Convert.ToDouble(args.Value) * args.RowData.Quantity); 
            await Grid.UpdateCell(index, "Sum", Convert.ToDouble(args.Value) + args.RowData.Quantity);  //here, we have calculated the values and shown in particular cell in while editing 
        } 
    } 
    . . . 
} 

Query 3. Depending on whether the check box is checked or not, I must set 0 in the'VAT' column of all rows in the grid or calculate and reflect the VAT. 

You want to set the value for VAT column for all rows while selecting the checkbox. Here, we have achieved your requirement by using ValueChange event of checkbox. While changing the checkbox value, we have set the VAT value. Find the below code snippets for reference. 

 
    <SfCheckBox @bind-Checked="isChecked" Label="Change" @onchange="onChange"></SfCheckBox> 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridColumns> 
        . . . 
        <GridColumn Field=@nameof(Order.VAT) HeaderText="VAT" Format="C2" AllowEditing="false" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . . . 
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) 
    { 
        if( Convert.ToBoolean(args.Value) == true) 
        { 
            foreach(var item in Orders) 
            { 
                item.VAT = 12; 
            } 
        } else 
        { 
            foreach (var item in Orders) 
            { 
                item.VAT = 0; 
            } 
        } 
        Grid.Refresh(); 
    } 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul  


TY Tyrone June 29, 2021 04:41 PM UTC

Is there is an another way to get Index (rowindex) instead of Grid.GetRowIndexByPrimaryKey?.  Grid.GetRowIndexByPrimaryKey is not applicable in newly added lineitems.   since they retun 0 ID in batchmode. 


RN Rahul Narayanasamy Syncfusion Team June 30, 2021 02:04 PM UTC

Hi Tyrone, 

Greetings from Syncfusion. 

We have validated your query and we suspect that above provided solution was not work when we add the record in batch mode editing. If we add the record in batch mode, then the added record index will be 0. The args.RowData has null values for all the fields while adding. So it does calculate the values to respective columns. 

We have modified the above solution to work the requirement(calculated the value for columns(Quantity and UnitPrice) and placed the value in Amount and Sum column) while adding the record. After entering the values in both columns, then move next field to see the calculated values in other columns. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents CellSaved="CellSavedHandler" OnBatchAdd="BatchAddHandler" OnBatchSave="BatchSaveHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    bool IsAdd { get; set; } 
    . . . 
    public async Task CellSavedHandler(CellSaveArgs<Order> args) 
    { 
        var index = await Grid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 
 
        if (args.ColumnName == "Quantity") 
        { 
            if (IsAdd) 
            { 
                args.RowData.Quantity = (int?)args.Value; 
                await Grid.UpdateCell(index, "Amount", Convert.ToInt32(args.Value) * 1); 
                await Grid.UpdateCell(index, "Sum", Convert.ToInt32(args.Value) + 0); 
            } 
            await Grid.UpdateCell(index, "Amount", Convert.ToInt32(args.Value) * args.RowData.UnitPrice); 
            await Grid.UpdateCell(index, "Sum", Convert.ToInt32(args.Value) + args.RowData.UnitPrice); 
        } 
        else if (args.ColumnName == "UnitPrice") 
        { 
            if (IsAdd) 
            { 
                args.RowData.UnitPrice = (double?)args.Value; 
                await Grid.UpdateCell(index, "Amount", Convert.ToDouble(args.Value) * 1); 
                await Grid.UpdateCell(index, "Sum", Convert.ToDouble(args.Value) + 0); 
            } 
            await Grid.UpdateCell(index, "Amount", Convert.ToDouble(args.Value) * args.RowData.Quantity); 
            await Grid.UpdateCell(index, "Sum", Convert.ToDouble(args.Value) + args.RowData.Quantity); 
        } 
    } 
 
    public void BatchAddHandler(BeforeBatchAddArgs<Order> args) 
    { 
        IsAdd = true; 
    } 
    public void BatchSaveHandler(BeforeBatchSaveArgs<Order> args) 
    { 
        IsAdd = false; 
    } 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 


Marked as answer
Loader.
Up arrow icon