grid edit button in details panel

[Daniel Reibelt]

Is there a way to trigger the edit dialog from within a details panel? 

Even a way to select the row would be enough, then i could program the start editing action

[Monisha Saravanan]

Hi Daniel, 

Greetings from Syncfusion support. 

We have analyzed your query and we understand that you need to render an edit dialog in an custom way on details panel. You can select the records using SelectRowAsync() method and StartEditAsync() method to edit the record. But we need some more details about your requirement, So kindly share the below details to validate further from our side. 

1. Share us whether you need to render an edit dialog of that record based on the button click in detail template?.
2. If yes then kindly share whether you need to render an dialog when the detail template is in expand state or in collapsed state. If not then kindly explain the query and the information regarding detail panel in brief.
3. Share us the grid code snippet.
4. Share more details about your requirement.

 

The provided information will help us to analyze the problem, and provide you a solution as early as possible. 

 

Regards, 

Monisha 

[Daniel Reibelt]

Hi Monisha

I have revised my approach to use a command column. However my goal was to have commands trigger from within the details row, thus creating a wider customised toolbar for use with each row as needed. One of those commands would be edit row. 

The

SelectRowAsync requires a row index, so i can use the

GetRowIndexByPrimaryKeyAsync to work with your suggestion, Thankyou

[Monisha Saravanan]

Hi Daniel, 

Thanks for the update. 

Yes, as per your update we can start edit after selecting the row and we can select the row by using GetRowIndexByPrimaryKey method. Kindly refer the attached code snippet for your reference. 

<SfGrid DataSource="@Employees" @ref="Grid" > 

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

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                <SfButton OnClick="@(()=>this.Edit(context as EmployeeData))">Edit</SfButton> 

                 } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        ... 

    </GridColumns> 

</SfGrid> 

 

 

@code{ 

    SfGrid<EmployeeData> Grid; 

    public List<EmployeeData> Employees { get; set; } 

        public async Task Edit(EmployeeData value) 

    { 

        var index = await Grid.GetRowIndexByPrimaryKey(value.EmployeeID);  

        await Grid.SelectRow(index);  

        await Task.Delay(100); 

        await this.Grid.StartEdit();  

 

    } 

Kindly get back to us if you have further queries. 

Regards, 

Monisha