在 Blazorise.DataGrid 的列末尾添加编辑 Button/Icon 查看 BLAZOR

Question

目前我正在尝试在每一列中添加一个编辑按钮，就像这样：

我的代码目前看起来像：

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

由此我得到以下信息：

我希望在每一列的 DateTime 之后得到一个编辑按钮 :)

Answer 1

如何为 Blazorise.DataGrid 扩展程序添加命令列添加、编辑、删除、保存、取消等？问题答案如下：

首先，您可以通过某种方式编辑数据网格，因为 <DataGrid/>您需要设置参数Editable = "true"。如何安装<DataGrid/>？ here.
必须在您所在的列 (<DataGridColumn/>) 中执行相同的操作需要编辑，设置参数Editable = "true"。然后在里面你需要添加一个 <EditTemplate /> 模板来处理编辑值。更多详情 here.
其次，需要添加<DataGridCommandColumn/>命令 <DataGrid> 组件内的列（在 DateTime 之后列）。
然后最后添加一个编辑按钮(<EditCommandTemplate/>) 在 <DataGridCommandColumn/> 组件内。您可以在这里熟悉其他命令：subsection Command Templates

以及它的实际外观，仅显示一列（名称）的示例：

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

在 Blazorise.DataGrid 的列末尾添加编辑 Button/Icon 查看 BLAZOR

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

c#

datagridview

datagridviewcolumn

blazor

blazorise