中济建设有限公司网站,做网站用python好吗,重庆免费自助建站模板,版面设计网站DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等#xff09;。
在这篇文章中#xff0c;我们将介…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的单元格编辑模式时Edit编辑、Cancel取消和Save按钮是不必要的。您可以从命令列中删除这些按钮也可以删除整个命令列。不使用内置命令列您可以添加工具栏或上下文菜单来显示自己的新记录和/或Delete按钮。
要在您的Blazor应用程序中激活单元格编辑模式必须
启用KeyboardNavigationEnabledd 属性并将 EditModee 属性设置为 EditCell。如果您的数据对象有一个或多个主键请将它/它们分配给KeyFieldName/KeyFieldNames 属性。处理EditModelSaving和DataItemDeleting 事件来处理保存和删除操作。(可选)要在Grid组件中显示与crud相关的命令按钮可以在 Columns 模板中声明DxGridCommandColumn对象。
DxGrid DataDataSource
KeyFieldNameEmployeeId
EditModeGridEditMode.EditCell
KeyboardNavigationEnabledtrue
EditModelSavingGrid_EditModelSaving
DataItemDeletingGrid_DataItemDeleting
Columns
DxGridCommandColumn /
DxGridDataColumn FieldNameFirstName /
DxGridDataColumn FieldNameLastName /
DxGridDataColumn FieldNameTitle /
DxGridDataColumn FieldNameHireDate /
/Columns
/DxGrid
code {
IGrid Grid { get; set; }
IEnumerableEditableEmployee 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编辑器(以及自动生成的编辑器)一起工作。
键盘支持
单元格编辑模式支持键盘导航并附带一组预定义的键盘快捷键因此它要求您启用KeyboardNavigationEnabled 属性。要在数据单元格中显示编辑器用户可以聚焦该单元格并按Enter。当编辑器可见时以下键盘快捷键可用
Enter — 验证单元格值并隐藏编辑器。Esc — 隐藏编辑器并丢弃在此单元格中所做的更改隐藏编辑器时按Esc将放弃行中所做的所有更改并取消行编辑。Tab/ShiftTab — 隐藏编辑器聚焦下一个/上一个数据单元格并在新聚焦的单元格中显示编辑器。
要在网格单元格之间快速导航用户还可以执行以下内置快捷方式(隐藏本地编辑器时可用)
Home/End — 聚焦当前行的第一个/最后一个单元格。CtrlHome/CtrlEnd — 聚焦当前页面上的第一个/最后一个数据单元格。Page Up/Page Down — 向上/向下移动焦点一页。
内置验证
DevExpress Blazor Grid 根据编辑模型中定义的 数据注释属性 自动验证用户输入一旦用户将焦点从编辑的单元格上移开网格将验证该单元格的值。当焦点离开已编辑的行或用户按下Save按钮时网格验证已编辑数据项的所有字段值。
验证后组件将用彩色轮廓标记编辑器并显示验证图标。用户可以将鼠标悬停在错误图标上在工具提示中显示相应的错误消息。网格阻止用户编辑其他行直到解决了所有验证错误。 保存更改
使用单元格编辑您可以随时保存更改可以将EditModelSaving和DataItemDeleting事件处理程序中的更改直接发布到底层数据库从而实现逐行保存操作。或者您可以在内存中积累更改(批处理编辑)并在用户执行特定操作(例如按下外部按钮)时将它们发布到数据库。 要在Blazor应用程序中引入批处理数据编辑请对代码进行以下更改
创建累积用户更改的存储。在EditModelSaving和DataItemDeleting事件处理程序中将更改放在此存储中替代将其发布到数据库中。创建允许用户放弃累积更改或将其应用于底层数据源的按钮。处理CustomizeElement事件来根据需要突出显示修改的单元格。
