DevExpress官网

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

DevExpress Blazor控件目前已经升级到v24.1版本了，此版本发布了全新的Sparkline、新的渲染引擎、升级的项目模板等，欢迎下载最新组件体验！ DevExpress v24.1正式版下载

DevExpress技术交流群11：749942875      欢迎一起进群讨论

全新的Sparkline

DevExpress Blazor全新的Sparkline组件允许您使用紧凑的UI隐喻来显示价格趋势，可以使用DevExpress Blazor Sparkline作为一个独立的组件或嵌入到其他UI控件。Sparkline允许您在根组件级别配置所有系列和点设置，Sparkline基于Type属性值（它定义了系列类型）应用相应的设置。除了序列和点设置之外，您还可以配置工具提示和自定义组件的容器。

Sparkline包括内置的导出和打印功能，您可以调用ExportToAsync方法将数据导出到文件（PNG、PDF、JPEG或SVG），或者调用GetSvgMarkup方法来获取组件的SVG标记。

全新的渲染引擎

下面的DevExpress Blazor组件现在使用我们优化的渲染引擎（替代Bootstrap）：

• Charts
• Rich Text Editor
• Scheduler
• Pivot Grid
• Upload
• Report Viewer

键盘支持

为了解决可访问性标准并改善用户体验，v24.1为以下DevExpress Blazor UI组件添加了键盘导航支持：

• Date Edit
• Time Edit
• Tree View
• Accordion
• ComboBox
• List Box
• TagBox
• Rich Text Editor
• Upload
• Report Viewer

项目模板

.NET 8身份验证和授权

针对.NET 8的Blazor项目模板包含一个选项，可以在项目中添加ASP .NET Core身份和基于Token的身份验证，除了必要的基础设施之外，我们的模板还生成了一个由DevExpress Blazor组件提供支持的身份验证接口。

Grid（网格）

Header Bands

DevExpress Blazor Grid控件现在可以将其列排列成称为频带的逻辑组，每个波段包含自己的标题，显示在列标题上方，没有带的列横跨整个带区域。网格还支持多级频带，其中一个频带可以显示其内部的其他频带。

虽然最终用户可以在频带内重新排序列或将列移动到Group Panel，但频带之间的列移动受到限制。

网格的列选择器也已更新，来支持Header Bands。它分层显示频带和列，并允许最终用户切换整个组的可见性，而不仅仅是单个列。

导出服务器端数据

DevExpress Blazor v24.1为任何受支持的服务器端数据/服务器模式源（GridDevExtremeDataSource或CustomDataSource）引入了Blazor Grid数据导出功能，远程数据支持导出为XLS、XLSX和CSV三种格式。

DevExpress Blazor Grid现在可以从远程数据源和导出文档中获取记录。在获取记录时，网格显示一个加载指示器。为避免闪烁，该指示灯只在预估取值时间内显示。

全新的单元格编辑器外观

DevExpress Blazor Grid的筛选行、编辑行和编辑单元格中的In-place编辑器具有新的改进的外观/感觉，并在需要时自动显示验证图标，网格单元格的外观现在在显示和编辑模式下都是一致的。

单元格编辑增强

DevExpress Blazor Grid的编辑单元格模式功能现在是正式发布，包括虚拟滚动支持。它现在附带了以下增强功能：

• 用户现在只需单击一下就可以更改复选框的值。
• 当单元格切换到编辑模式时，网格会自动选择单元格文本。
• 网格现在在切换到编辑模式时自动更新焦点行。
• 网格的新GetEditContext方法允许您随时获取编辑上下文。
• 列文本对齐会影响列内显示的编辑器。

键盘导航增强和新标签导航

在v24.1中，DevExpress Blazor Grid提供了增强的键盘导航和虚拟滚动支持。Grid组件现在自动激活键盘导航和内置快捷键（注意：项目中删除KeyboardNavigationEnabled属性，它现在已经过时了）。

无论单元格编辑器的激活状态如何，Tab键都可以在所有网格单元格之间导航，用户也可以通过按Ctrl + Up或Ctrl + Down （Mac上是Alt + Up或Alt + Down）离开表格区域。

此外，新版本改进了RowClick 事件。在v24.1中，此事件允许您实现自定义操作，来响应鼠标单击和用户在数据行有焦点时按Enter键。

内置值发布

新版本向EditModelSaving事件参数添加了以下新方法：CopyChangesToDataItem。此方法允许您复制在编辑期间对编辑模型所做的所有更改，复杂的字段值也可以被复制。

下面的v23.2代码片段…

C#

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (EmployeeEditModel)e.EditModel;
if (dataItem != null) {
dataItem.FirstName = editModel.FirstName;
dataItem.LastName = editModel.LastName;
dataItem.Title = editModel.Title;
dataItem.HireDate = editModel.HireDate;
}
}

…现在可以用更短的版本替换：

C#

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (EmployeeEditModel)e.EditModel;
if (dataItem != null) {
e.CopyChangesToDataItem();
}
}

支持DateOnly和TimeOnly

在v24.1中，DevExpress Blazor Grid组件支持以下DateOnly和TimeOnly类型：

• 排序
• 过滤
• DateOnly值的分层筛选菜单
• 分组
• 摘要
• 自动生成单元格编辑器
• DateOnly值的间隔分组
• 使用DisplayFormat格式化值
• Excel导出

启用/禁用Skeletons

当虚拟滚动与本地数据一起使用时，DevExpress Blazor网格不再默认显示skeletons。由于本地数据源中的行通常是快速呈现的，因此这种新操作产生了更流畅的体验，视觉更新更少。

默认情况下，远程数据源仍然启用Skeletons（用于从服务器或数据库加载记录）。您现在可以使用SkeletonRowsEnabled属性来控制skeleton操作 - 如果服务器响应时间是可接受的，可以为本地源启用它，或者为远程源禁用它。

悬停时突出显示行

要在鼠标悬停时突出显示Blazor Grid行，只需启用我们的新HighlightRowOnHover 属性（突出显示颜色是基于您的DevExpress驱动的Blazor应用程序中使用的主题）。

更多产品更新咨询，请戳这里直接咨询>>

更多DevExpress线上公开课、中文教程资讯请上中文网获取

相关产品： DevExpress WPF Subscription, DevExpress WinForms Subscription, DevExpress Universal Subscription, DevExtreme跨平台开发框架,