Edit operation show for each row without using the mouse

[Duong Quoc]

I mean, when you click the "Edit row 1" button, the Grid will show the edit of row 1 to the user and the same for rows 2,3,4,...

Code:

<SfButton @onclick="EditRow1">Edit row 1</SfButton>

 <SfButton @onclick="EditRow2">Edit row 2</SfButton>

 <SfButton @onclick="EditRow3">Edit row 3</SfButton>

 <SfButton @onclick="EditRow4">Edit row 4</SfButton>

 <SfButton @onclick="EditRow5">Edit row 5</SfButton>

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

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

    <GridColumns>

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>

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

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

    </GridColumns>

</SfGrid>

[Sarveswaran Palani]

Hi Duong,

We have prepared a simple sample using your shared code snippet. Kindly check the attached code snippet and sample for your reference.

Here we have used  SelectRowAsync and StartEditAsync method to perform external edit.

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

<SfButton @onclick="EditRow1">Edit row 1</SfButton>

 

 

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

 

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

 

    <GridColumns>

 

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

 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>

 

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

 

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

 

    </GridColumns>

 

</SfGrid>

 

@code {

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

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

    public async Task EditRow1()

    {

        await Grid.SelectRowAsync(0);

        await Grid.StartEditAsync();

    }

    }

Please let us know if you have further queries.

Regards,

Sarvesh