How to count rows and move/add/delete records

[Sora Kim]

Hello.

I have a few questions.

1.  I would like to know how to move/add/delete records to a specific location as a source.
2. When using Grid, I would like to know how to automatically count row numbers in Excel as shown.
   
1. The speed is too slow when using this code.

<Syncfusion.Blazor.Grids.GridColumn Field=@nameof(dtoInput.dbid) HeaderText="#"

   Type="Syncfusion.Blazor.Grids.ColumnType.String"

   HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"

  AllowEditing="false" Width="50" >

         <Template>

          @{  var con = context as DtoInput;

                  <div> @(InputLists.IndexOf(con) + 1) </div> }

         </Template>

 </Syncfusion.Blazor.Grids.GridColumn> 

Please include example source. 

Thank you.

[Prathap Senthil]

Hi Sora Kim,

Query :”how to move/add/delete records to a specific location as a source.”

Based on your requirements to manage records by moving, adding, or deleting them at a specific location within the datagrid to move records we have the RowDrag and Drop features to achieve this. For adding and deleting records, you can use the AddRecordsAsync and DeleteRecordsAsync methods. Kindly refer to the documentation below for more information.

Reference:

https://blazor.syncfusion.com/documentation/datagrid/row-drag-and-drop
https://blazor.syncfusion.com/documentation/datagrid/editing#performing-crud-operations-programmatically

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

Query:” I would like to know how to automatically count row numbers in Excel as shown.”

Based on your requirements, you can add a column that displays the row number of each row by using a template for that column. To accomplish this, we recommend utilizing the GetRowIndexByPrimaryKeyAsync public method. This method retrieves the row index based on the primary key value and then displays it using a template feature within a GridColumn. Kindly refer to the below code snippet and sample for your reference.

 

<SfGrid DataSource="@Orders" @ref="@Grid" TValue="Order" Toolbar="@(new List<string>{"Add"})">

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

    <GridColumns>

        <GridColumn HeaderText="RowIndex" Width="100">

            <Template>

                @{

                    var data = (context as Order);

                    var rowIndex = Grid.GetRowIndexByPrimaryKeyAsync(data.OrderID);

                    <p>@rowIndex.Result</p>

                }

            </Template>

        </GridColumn>

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

    </GridColumns>

</SfGrid>

 

@code {

 

 

    public SfGrid<Order>? Grid { get; set; }

}

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

Reference:

https://blazor.syncfusion.com/documentation/datagrid/templates

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

Regards,
Prathap Senthil