c# - Add an Edit Button/Icon at end of columns of Blazorise.DataGrid View BLAZOR

Question

currently I'm trying to get an edit button in every column smth like that:

My code currently looks like:

<DataGrid Data="@ViewModel.SurveyInstances"
          TItem="SurveyInstance"
          Bordered="true"
          ShowPager="false"
          Sortable="true">
    <DataGridColumns>
        <DataGridColumn TItem="SurveyInstance" Field="Partner.Name" Caption="Partner Name" Width="10%"/>
        <DataGridColumn TItem="SurveyInstance" Field="Survey.Title_DE" Caption="Survey Title" Width="10%"/>
        <DataGridColumn TItem="SurveyInstance" Field="@nameof(SurveyInstance.Date)" Caption="Date" Width="10%"/>
    </DataGridColumns>
</DataGrid>  

Out of this I get the following:

I would love to get an edit button after the DateTime for every column :)

Answer 1

How for Blazorise.DataGrid extension add command columns to add, edit, delete, save, cancel, etc.? The answer to the question is as follows:

1. Firstly, so that you can somehow edit the datagrid, for the <DataGrid/> you need to set the parameter Editable = "true". How to install <DataGrid/>? here.

2. The same must be done in the columns (<DataGridColumn/>) in which you need to edit, set the parameter Editable = "true". Then inside you need to add a <EditTemplate /> template to handle editing the values. More details here.

3. Secondly, you need to add the <DataGridCommandColumn/> command column inside the <DataGrid> component (after the DateTime column).

4. And then finally add an edit button (<EditCommandTemplate/>) inside the <DataGridCommandColumn/> component. You can familiarize yourself with other commands here: subsection Command Templates

And how it will actually look like, an example is shown for only one column (Name):

    <DataGrid Data="@SurveyInstances"
          TItem="SurveyInstance"
          Bordered="true"
          ShowPager="false"
          Sortable="true"
          Editable="true">
    <DataGridColumns>

        <DataGridColumn TItem="SurveyInstance" 
                        Field="Name" 
                        Caption="Partner Name" 
                        Editable="true">

            <DisplayTemplate>
                @context.Name
            </DisplayTemplate>

            <EditTemplate>
                <TextEdit TValue="string"
                          Text="@((string)context.CellValue)"
                          TextChanged="@( v => {
                                                    context.CellValue = v;
                                                    context.UpdateCell( nameof( SurveyInstance.Name ), v);
                                              })" />
            </EditTemplate>

        </DataGridColumn>

        <DataGridColumn TItem="SurveyInstance" 
                        Field="Title" 
                        Caption="Survey Title"
                        Editable="false"/>

        <DataGridCommandColumn TItem="SurveyInstance">

            <EditCommandTemplate>
                <Button Color="Color.Primary" Clicked="@context.Clicked">Edit</Button>
            </EditCommandTemplate>

        </DataGridCommandColumn>

    </DataGridColumns>

</DataGrid>