How to automatically add a new record after completing the data import of the previous row

[Duong Quoc]

Question: 

In Grid, when the user "Add" or "Edit" checks if the user has finished entering the data? and how to automatically continue to enable the "Add" function when the user has finished entering the data of the previous row.

[Prathap Senthil]

Hi Duong Quoc,

Based on your query, we suspect that you want to always add a new row in the grid. To achieve this, we suggest enabling the ShowAddNewRow property in the GridEditSettings. When you enable the ShowAddNewRow property, a new blank row is displayed at the top of the grid content. This new blank row can be displayed either at the top or bottom of the corresponding page, depending on the setting of the NewRowPosition property. Kindly refer to the below code snippet and demo for your reference.

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" ShowAddNewRow="true"></GridEditSettings>

    <GridColumns>

---------    </GridColumns>

</SfGrid>

Note: The ShowAddNewRow property was introduced in version 26.1.35 of the 2024 Volume 2 release. This property pertains solely to the display of a new blank row in Normal editing mode.

Demo:https://blazor.syncfusion.com/demos/datagrid/inline-editing?theme=fluent2

If the provided solution does not fully address your needs, could you please provide more details about your exact requirement? For example, are you looking for the grid to automatically add a new row specifically after data entry is completed in the previous row, or do you need the behavior to trigger under specific conditions?

Regards,
Prathap Senthil

[Duong Quoc]

Hi. Is there another way? I want to use this attribute "await this. SfGrid.AddRecordAsync();". This means that when I move to the bottom of a line or finish an entry, Gird automatically creates a new line.

[Duong Quoc]

Hi. Is there another way? I want to use this attribute "await this. SfGrid.AddRecordAsync();". This means that when I move to the bottom of a line or finish an entry, Gird automatically creates a new line.

[Prathap Senthil]

Based on your requirements, we suggest the following approach to achieve your goal of calling the AddRecordAsync method when moving to the bottom of a line or finishing an entry. Please refer to the code snippet and sample below for your reference.

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

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

 

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

    <GridColumns>

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

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

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

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

         

        </GridColumn>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country"  Width="150">

            <EditTemplate>

 

                @{

                    var data = context as Order;

 

                    <div >

                        <SfTextBox ID="ShipCountry" Focus="@(async (Syncfusion.Blazor.Inputs.FocusInEventArgs args) =>await  FocusHandler(args, data))" @onkeydown="@(async(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs e) => await Keydo(e))" @bind-Value="@(data.ShipCountry)"></SfTextBox>

                    </div>

 

                }

 

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

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

 

    SfGrid<Order> sfGrid { get; set; } = new SfGrid<Order>();

    public bool IsTab { get; set; } = false;

    public bool IsAdd { get; set; } = false;

 

    private async Task FocusHandler(Syncfusion.Blazor.Inputs.FocusInEventArgs args, Order order)

    {

        var lastRowIndex = Orders.Count - 1;

        var editedRowIndex = sfGrid.GetRowIndexByPrimaryKey(order.OrderID).Result;

        if (lastRowIndex == editedRowIndex)

        {

 

            IsTab = true;

 

        }

        else if(IsAdd)

        {

 

            IsTab = true;

        }

        else

        {

            IsTab = false;

        }

    }

 

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

    {

        if (args?.KeyCode == "Tab" && IsTab)

        {

            args.Cancel = true; //prevent default tab action in last column

 

        }

        else if (IsAdd && IsTab)

        {

            args.Cancel = true;

        }

 

    }

 

    public async Task Keydo(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs Args)

    {

 

        try

 

        {

 

            if (Args.Code == "Tab" && IsTab && !IsAdd )

            {

                await  sfGrid.EndEditAsync();

                await  sfGrid.AddRecordAsync();

                IsTab = false;

                IsAdd = true;

                Console.WriteLine("Key" + Args.Code);

 

            }

            else if (Args.Code == "Tab"&& IsAdd && IsTab)

            {

                IsTab = false;

                await sfGrid.EndEditAsync();

                await sfGrid.AddRecordAsync();

            }

 

        }

 

        catch (Exception ex)

 

        {

 

        }

 

    }

 

}

 

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