Show Edit when Click on the button whose value corresponds to each row on Gird

[Qu?c Duong Quý]

Supposing I have 1 series of numbers, how so that when I click on the corresponding number, it will show the same row so that I can edit, instead of having to click on that row and then having to click the "Edit" button on the toolbar? For example: Click on the button with value = 2, gird will show the "Edit" operation for me to edit row 2.

[Naveen Palanivel]

Hi Qu?c Duong Quý,

Greetings from Syncfusion support.

We checked your query, we would like to inform that the command column features provides an option to add CRUD action buttons in a each row .we have already discussed about this similar topics detailly in our UG documentation. Kindly refer the documentation for your reference.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/command-column-editing

If we misunderstand the query please give more details, Kindly share the below details to validate further at our end.

1. Share us entire Grid code snippet along with model class.
2. Could please share a screenshot or video demo what you are excepting ,it is very useful to us.
3. If possible share us an simple issue reproduceable sample. 

The above-requested details will be helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel

[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>

[Monisha Saravanan]

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,

Monisha