摘要:DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生Blazor UI组件(包括Pivot Grid、调度程序、图表、数据编辑器和报表
DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生Blazor UI组件(包括Pivot Grid、调度程序、图表、数据编辑器和报表等)。
DevExpress Blazor控件目前已经升级到v24.1版本了,此版本发布了全新的Sparkline、新的渲染引擎、升级的项目模板等,欢迎下载最新组件体验!
全新的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应用程序中使用的主题)。
来源:小王看科技