How to use and exploit using the new ShowAddNewRow

[Frangoudes Panikos]

Good evening,

I am using 

<PackageReference Include="Syncfusion.Blazor" Version="26.1.38" />

I am very pleased to find the new option ShowAddNewRow  when using the inline editing in a grid.

I am trying to find out how to provide default values for the newrow and also how to manipulate the data in that row, by changing values in any column  when some condition or conditions are met. 

I do not know which events are fired and when. 

When the  ShowAddNewRow is toggled which events are used ?

 Are there any new events not mentioned in the documentation yet?

It will be very helpfull to know which properties and events are used.

Can you please help with the above

Thanking you in advance

Best regards

Panikos Frangoudes

[Naveen Palanivel]

Hi Frangoudes,

Based on your query, it appears that you want to set default values for new rows and manipulate data within those rows by changing values in any column based on conditions. You can set default values for new rows using the `DefaultValue` property and modify data during updates using the `RowUpdating` event. Please refer to the code snippet and sample provided for further details.

Reference : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating
                     https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue

                     https://blazor.syncfusion.com/documentation/datagrid/editing#default-column-values-on-adding-new-record

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal" ShowAddNewRow="true"></GridEditSettings>

    <GridEvents RowUpdated="RowUpdatedHandler" RowUpdating="RowUpdatingHandler" TValue="Order"></GridEvents>

    <GridColumns>

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

</SfGrid>

 

@code {

 

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

 

    protected override void OnInitialized()

    {

        Orders = GetAllRecords();

    }

 

    public List<Order> GetAllRecords()

    {

    }

 

 

    public void RowUpdatingHandler(Syncfusion.Blazor.Grids.RowUpdatingEventArgs<Order> args)

    {

        if (args.Data.Freight.Value > 10)

        {

            args.Data.Freight = 7.5;

        }

    }

 

Regards,
Naveen

[Frangoudes Panikos]

Dear  Naveen,

thank you very much for your prompt reply and the indications and sample you provided.

 All though they are very useful they are not enough for the way I am asking for help.

Having ShowAddNewRow="true"

. Once the new row is created I can't find an event that is called either before or after the row creation.

 There It would be useful if I could fill the new row with data that are NOT known before hand while designing the grid but only after a field value is changed and the new values to be displayed.

.On changing a filed in the new row upon conditions other fields are filled and must be displayed in the row. This must be done while in editing of the row, for example I may have the following  columns

Qty, UnitPrice, Value, VatAmount, TotalValue

on changing any of these columns I need to show the calculated values of the other columns and not wait until the row is submitted. 

I would suggest the creation a column ValueChanged event as with other Syncfusion Components or something like the Update eventcallback  of the SfDataForm

. RowUpdatingHandler is useful only for when the row is submitted.

.DefaultValue="2345   is useful only when the column values are known in advance. What happens when they are not.

. In the provided example I have changed the columns order in order to show the issue. The Freight column is not the last column so when a change is made like freight=13.24 the change is not show but only after the row is submitted.

Please can you help me with the above issues

Best Regards

Panikos Frangoudes

Attachment: TestPage3_252df052.zip

[Prathap Senthil]

Hi Frangoudes,

Based on your requirement, we regret to inform you that currently we don’t have any events initially for when using the ShowAddNewRow property. Instead, we suggest using the following approach: “On changing a field in the new row, upon conditions, other fields are filled and must be displayed in the row. This must be done while editing the row.” To achieve this, you can use the EditTemplate feature. Kindly refer to the code snippet and sample below for your reference.

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

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

    <GridEvents RowUpdating="RowUpdatingHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowAdding="true" ShowAddNewRow="true" NewRowPosition="Syncfusion.Blazor.Grids.NewRowPosition.Bottom"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Product Name" IsPrimaryKey="true" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true})" Width="100"></GridColumn>

        <GridColumn Field=@nameof(Order.Price) HeaderText="Price" Format="C2" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true})" Width="90" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right">

            <EditTemplate>

                @{

                    var Order = (context as Order);

                    <SfNumericTextBox ID="Price" @ref="PriceRef" @bind-Value="@(Order.Price)" TValue="double" Placeholder="Price" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always">

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

                    </SfNumericTextBox>

                }

            </EditTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.Quantity) HeaderText="Quantity" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true})" Width="90" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right">

            <EditTemplate>

                @{

                    var Order = (context as Order);

                    <SfNumericTextBox ID="Quantity" @ref="QuantityRef" @bind-Value="@(Order.Quantity)" TValue="int?" Placeholder="Quantity" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always">

                        <NumericTextBoxEvents ValueChange="ValueChange" TValue="int?"></NumericTextBoxEvents>

                    </SfNumericTextBox>

                }

            </EditTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.Total) HeaderText="Total" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType="Syncfusion.Blazor.Grids.EditType.NumericEdit" Width="90">

            <EditTemplate>

                @{

                    var Order = (context as Order);

                    <SfNumericTextBox ID="Total" Value="@TotalValue" Enabled="false" TValue="double" Placeholder="Total" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always"></SfNumericTextBox>

                }

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

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

    SfGrid<Order> Grid { get; set; }

    SfNumericTextBox<double> PriceRef;

    SfNumericTextBox<int?> QuantityRef;

    public double TotalValue { get; set; }

    public void RowUpdatingHandler(Syncfusion.Blazor.Grids.RowUpdatingEventArgs<Order> args)

    {

        args.Data.Total = TotalValue;

    }

 

    public void ValueChange()

    {

        TotalValue = 0;

        Grid.PreventRender(false);

        TotalValue = Convert.ToDouble(PriceRef.Value * QuantityRef.Value);

    }

}

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

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

Regards,
Prathap Senthil