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 :)
How for Blazorise.DataGrid extension add command columns to add, edit, delete, save, cancel, etc.? The answer to the question is as follows:
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.
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.
Secondly, you need to add the <DataGridCommandColumn/>
command
column inside the <DataGrid>
component (after the DateTime
column).
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>