界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验，这个UI自建库提供了一套全面的原生Blazor UI组件（包括Pivot Grid、调度程序、图表、数据编辑器和报表等）。

在这篇文章中，我们将介绍DevExpress Blazor Grid 组件的新单元格编辑模式功能（在v23.2发布周期中作为社区技术预览版提供）。

获取DevExpress v23.2正式版下载(Q技术交流：909157416）

单元格编辑UI

当启用单元格编辑模式时，用户可以单击单元格，并通过这样做将其切换到编辑模式。一旦进入编辑模式，DevExpress Blazor Grid将在单元格中显示一个就地编辑器，用户可以使用此编辑器编辑当前单元格值，或者将焦点移动到其他单元格并显示关联的编辑器。当焦点移到另一行时，控件将验证用户输入并根据需要保存更改。

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

当使用DevExpress Blazor Grid的单元格编辑模式时，Edit（编辑）、Cancel（取消）和Save按钮是不必要的。您可以从命令列中删除这些按钮，也可以删除整个命令列。不使用内置命令列，您可以添加工具栏或上下文菜单来显示自己的新记录和/或Delete按钮。

要在您的Blazor应用程序中激活单元格编辑模式，必须：

启用KeyboardNavigationEnabledd 属性，并将 EditModee 属性设置为 EditCell。
如果您的数据对象有一个或多个主键，请将它/它们分配给KeyFieldName/KeyFieldNames 属性。
处理EditModelSaving和DataItemDeleting 事件来处理保存和删除操作。
(可选)要在Grid组件中显示与crud相关的命令按钮，可以在 Columns 模板中声明DxGridCommandColumn对象。

<DxGrid Data="DataSource"
KeyFieldName="EmployeeId"
EditMode="GridEditMode.EditCell"
KeyboardNavigationEnabled="true"
EditModelSaving="Grid_EditModelSaving"
DataItemDeleting="Grid_DataItemDeleting">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
</DxGrid>
@code {
IGrid Grid { get; set; }
IEnumerable<EditableEmployee> DataSource { get; set; }
// ...
async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
// Saves changes
}
async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
// Deletes the processed data item
}
}

与DevExpress Blazor Grid的其他数据编辑模式类似，单元格编辑模式根据列数据类型自动生成单元格编辑器。对于高级使用场景，您可能需要自定义自动生成的编辑器，或者用所需的编辑器替换它们。当您探索这个特性时，一定要检查单元格编辑是否与为EditSettings和CellEditTemplate定义的DevExpress编辑器(以及自动生成的编辑器)一起工作。