DevExpress Universal v24.1 更新亮点解析（五）：Blazor UI 控件

新闻资讯

关注工具软件产品最新动态，了解软件开发行业新趋势。

原创

软件开发

来源：DevExpress

ui界面

报表

图表

DevExpress

PDF

HTML5

2024-06-27

ui界面

报表

图表

DevExpress

PDF

HTML5

#DevExpress #DevExpress Blazor UI #DevExpress Universal Subscription

DevExpress Blazor UI 组件 v24.1

新的 TreeList (CTP)
新的 HTML 编辑器
新的 PDF 查看器 (CTP)
新地图
新的极坐标图
新的日期范围选择器
新的下拉框
新文件输入
新抽屉
新吐司
新的进度条
新的条形仪表
新迷你图
新的渲染引擎
键盘支持
项目模板
网格
图表
新的 ComboBox 和 TagBox
列表框
日期编辑 & 时间编辑
文件管理
表单布局
富文本编辑器
调度器
窗口和弹出窗口

新的 TreeList (CTP)

我们新的 Blazor TreeList可让您轻松组织、显示和导航分层数据。该组件附带以下集成功能：

数据排序
使用自动生成的编辑器过滤行
总摘要
单节点和多节点选择
焦点行
标题带
分页和滚动
虚拟滚动
工具栏
键盘支持

您会注意到 DevExpress Blazor TreeList 和 Grid UI 组件的外观和行为方式相似。这不是巧合。我们的 Blazor TreeList 和 Grid 使用相同的渲染引擎并依赖于通用逻辑/算法。由于组件之间的共性，我们可以在未来的发布周期中同时为这两个组件添加新功能。

#绑定到平面数据

我们的 Blazor TreeList 组件可以绑定到任何传统数据源。由于 TreeList 旨在使用树结构显示信息，因此其数据源必须满足特定要求。如果数据源包含平面数据，则需要两个附加字段来构建适当的树结构：

包含节点唯一标识符的字段。将此字段分配给KeyFieldName属性。
包含节点父节点的唯一标识符的字段。将此字段分配给ParentKeyFieldName属性。

以下示例将 Blazor TreeList 组件绑定到平面数据源：

Razor
@inject IEmployeeTaskDataProvider EmployeeTaskDataProvider
<DxTreeList Data="@TreeListData"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="EmployeeName"/>
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>
 
@code {
    List<EmployeeTask> TreeListData { get; set; }
    protected override void OnInitialized () {
        TreeListData = EmployeeTaskDataProvider.GenerateData();
    }
}

#绑定到服务器端数据

您还可以将 DevExpress Blazor TreeList 组件绑定到我们的DevExtremeDataSource。此数据源可让您在绑定大型数据集时提高 TreeList 的性能，原因如下：

TreeList 根据需要加载子节点（当用户展开一个节点时）。
DevExtremeDataSource在服务器上执行数据过滤操作。

要将组件绑定到DevExtremeDataSource，您必须：

将GridDevExtremeDataSource实例分配给Data属性
指定KeyFieldName和ParentKeyFieldName属性。
指定HasChildrenFieldName属性。此属性有助于确定节点是否包含子节点以及节点是否需要展开按钮。

#绑定到分层数据

如果数据源中的每个节点都包含一个带有子节点列表的字段，请将该字段的名称分配给ChildrenFieldName属性，并将Data属性绑定到数据源：

Razor
@inject ISpaceObjectDataProvider SpaceObjectDataProvider
<DxTreeList Data="@TreeListData"
            ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name"/>
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type"/>
        <DxTreeListDataColumn FieldName="Mass" Caption="Mass, kg"/>
        <DxTreeListDataColumn FieldName="MeanRadius" Caption="Radius, km"/>
    </Columns>
</DxTreeList>
 
@code {
    List<SpaceObject> TreeListData { get; set; }
    protected override void OnInitialized () {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
}

或者，您可以将根节点集合分配给Data属性，并处理ChildrenLoading事件以用子节点填充节点。在事件处理程序中，使用Parent参数确定已处理的节点，并将此节点的子节点分配给Children属性。

#按需加载数据

DevExpress Blazor TreeList 允许您最初仅加载根节点，并在首次展开节点时检索节点子节点。要将组件切换到按需模式，请按照以下步骤操作：

将根数据项分配给数据属性。
指定HasChildrenFieldName属性。
处理ChildrenLoadingOnDemand事件。在事件处理程序中，使用Parent参数确定已处理的节点，并将该节点的子节点分配给Children事件参数。

以下示例按需加载 TreeList 数据：

Razor
@inject FileSystemDataProvider FileSystemDataProvider
<DxTreeList Data="TreeListData"
            HasChildrenFieldName="HasChildren"
            ChildrenLoadingOnDemand="TreeList_ChildrenLoadingOnDemand">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="Type" />
        <DxTreeListDataColumn FieldName="DateModified" />
        <DxTreeListDataColumn FieldName="Size" />
    </Columns>
</DxTreeList>
 
@code {
    object TreeListData { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await FileSystemDataProvider.GetRootItemsAsync();
    }
    Task TreeList_ChildrenLoadingOnDemand(TreeListChildrenLoadingOnDemandEventArgs e) {
        var item = e.Parent as FileSystemDataItem;
        e.Children = item.Children;
        return Task.CompletedTask;
    }
}

新的 HTML 编辑器

我们的 Blazor HTML 编辑器允许您格式化/显示文本和视觉内容并将其存储为 HTML 或 Markdown。用户可以根据需要应用内联格式并修改字体、大小和颜色。此外，DevExpress Blazor HTML 编辑器还提供以下集成功能：

块格式，包括标题、文本对齐、列表（项目符号和编号）、代码块和引号。
变量支持（例如，{{companyName}}）：除其他用例外，此功能可用于生成动态电子邮件内容。
具有自适应布局支持的工具栏。
内置工具栏定制。
插入图片：您可以从本地文件系统上传图片或者指定一个URL。
表支持。
提到支持。

新的 PDF 查看器 (CTP)

新的 DevExpress Blazor PDF Viewer组件可以直接在由 DevExpress 支持的 Blazor 应用中显示 PDF 文件内容。该组件允许您浏览文档、设置缩放级别、打印和下载文档。此外，CTP 版本的 Blazor PDF Viewer 还包括单页预览和工具栏自定义选项（例如重新排列、分组、隐藏和添加项目）

新地图

DevExpress Blazor Map组件可以在由 DevExpress 提供支持的 Blazor Web 应用中显示带有标记和路线信息的地理地图。该组件从 GIS 服务（Bing、Google 或 GoogleStatic - 需要使用适当的 API 密钥进行应用程序身份验证）检索相关数据，并附带以下功能：

标记/路线配置和定制选项。
内置地图导航和类型控制。
手动调整地图（设置缩放和地图中心）。
地图和标记“点击”支持。

新的极坐标图

DevExpress Blazor极坐标图允许您在极坐标系中可视化数据 - 其中平面上的每个点由与中心的距离和与固定方向的角度决定。 DevExpress Blazor 极坐标图组件具有以下功能：

多种系列类型：线图、面积图、条形图、堆积条形图和散点图。
连续、离散和对数轴值支持。
蜘蛛网模式。
图表元素定制：标签、工具提示、图例等等。

新的日期范围选择器

DevExpress Blazor日期范围选择器允许您在单个日历下拉列表中选择日期范围。该组件附带以下集成功能：

最小日期和最大日期
特殊日期突出显示
选定日期格式化 API
输入验证
清除按钮
可空日期支持和占位符
自动支持浏览器时区和本地化

新的下拉框

DevExpress Blazor DropDown Box是一个可自定义的编辑器 - 旨在在其下拉窗口中显示/使用各种 UI 元素：从简单的列表和树到网格，或其中的任意组合。您可以根据页面交互以编程方式分配编辑器值。

以下代码片段将 DevExpress Blazor Grid 添加到下拉框弹出窗口。

Razor
<DxDropDownBox Value="Value" QueryDisplayText="QueryText">
    <DropDownBodyTemplate>
        <DxGrid Data="@GridData" ShowSearchBox="true" SelectedDataItem="@Value"
            SelectedDataItemChanged="item => GridSelectedDataItemChanged(item, context.DropDownBox)" .../>
    </DropDownBodyTemplate>
</DxDropDownBox>
@code {
    Customer Value { get; set; }
    IEnumerable<object> GridData { get; set; }
    string QueryText(DropDownBoxQueryDisplayTextContext arg) {
        if(arg.Value is Customer value)
            return value.ContactName;
        return string.Empty;
    }
    void GridSelectedDataItemChanged(object item, IDropDownBox dropDownBox) {
        Value = item as Customer;
        dropDownBox.HideDropDown();
    }
}

下拉框的值不仅限于单个对象。它可以是对象的集合（对于那些希望实现多选编辑器的人来说）：

或者甚至根据弹出窗口中的用户选择生成复合数据项：

新文件输入

我们新的Blazor 文件输入组件允许您将文件上传功能引入您的 Blazor 应用程序，而无需创建带有上传控制器的单独 Web API 项目。

我们的 Blazor 文件输入控件支持多种上传模式（Instant和OnButtonClick），可以同时上传多个文件，并允许您在客户端和服务器上验证文件大小和扩展名。

处理FilesUploading事件以上传选定的文件。对于每个文件，该事件提供一个可以打开以读取文件内容的 Stream。读取操作完成后，您可以将文件发送到另一个目标、将其保存到文件系统或在网页上显示文件内容。

以下代码片段配置 FileInput 将文件上传到指定文件夹：

Razor
<DxFileInput FilesUploading="OnFilesUploading" />
@code {
    async Task OnFilesUploading(FilesUploadingEventArgs args) {
        foreach (var file in args.Files) {
            Stream? stream = default;
            var filePath = "full path to the uploaded file";
            FileStream fs = new(filePath, FileMode.Create);
            try {
                if(IsValidFile(file)) {
                    stream = file.OpenReadStream(int.MaxValue);
                    await stream.CopyToAsync(fs);
                }
            }
            catch (Exception ex) {
                if (file.CancellationTokenSource.IsCancellationRequested)
                    // Handle the cancel action here
            }
            finally {
                await fs.FlushAsync();
                fs.Close();
                if (stream != null)
                    stream.Close();
            }
        }
    }
}

注意：在向您的 Blazor 应用添加文件上传功能之前，请确保建立必要的安全相关流程（以避免风险并控制未经授权的文件操作）。

新抽屉

我们的新Blazor Drawer组件允许您向 Web 应用程序添加“可关闭”的导航侧面板。该控件包括以下功能：

左侧和右侧位置。
重叠和收缩显示模式。
最小化抽屉状态。
页眉、正文和页脚模板。

新吐司

我们新的Blazor Toast组件允许您通知用户有关流程和事件的信息。通知消息可以一直显示，直到用户单击“关闭”按钮，或者在预定的时间后自动关闭。DevExpress Blazor Toast 组件支持四种主题模式（深色、浅色、柔和色和饱和色）和以下通知样式：

危险
信息
基本的
成功
警告

您可以将DxToast组件放置在标记中并调用Show方法来显示它。

Razor
<DxToastProvider Name="ToastContainer" />
<DxToast @ref=toast Text="The process has been completed." ProviderName="ToastContainer" />
@code {
    DxToast toast;
    protected override void OnAfterRender(bool firstRender) {
        toast.Show();
    }
}
          </lang>
        </code2>
        <para>
          Alternatively, use the notification service to create toasts at runtime.
        </para>
        <code2>
          <lang brush="razor" name="Razor">
<DxToastProvider Name="ToastContainer" />
@code {
    [Inject] IToastNotificationService ToastService { get; set; }
    protected override void OnAfterRender(bool firstRender) {
        ToastService.ShowToast(new ToastOptions {
            ProviderName = "ToastContainer",
            Text = "The process has been completed."
        });
    }
}

在这两种情况下，您都必须将DxToastProvider组件添加到页面。此组件充当 toast 容器，应在显示 toast 的位置声明。

新的进度条

新的 DevExpress Blazor 进度条组件允许您与最终用户沟通正在进行的流程的状态。当无法估计进度时，该组件可以显示无限移动的进度条。该控件包括以下集成功能：

水平、垂直和圆形布局
四种状态指示流程状态：进行中、警告、错误和成功
不确定状态
元素自定义：图标、标签和条形粗细

新的条形仪表

Blazor 的条形仪表允许您将数据显示为圆形条形，其中每个条形表示一个值。该组件具有以下功能：

几何和布局配置
调色板定制
导出和打印支持
实时数据更新
仪表元素定制：标签、工具提示、图例等等。

新迷你图

我们新的Blazor Sparkline组件允许您使用紧凑的 UI 隐喻显示价值趋势。您可以将 DevExpress Blazor Sparkline 用作独立组件，也可以将其嵌入到其他 UI 控件中。Sparkline 允许您在根组件级别配置所有系列和点设置。Sparkline 根据Type属性值（定义系列类型）应用相应的设置。除了系列和点设置之外，您还可以配置工具提示并自定义组件的容器。

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

新的渲染引擎

以下 DevExpress Blazor 组件现在使用我们优化的渲染引擎（而不是 Bootstrap）：

图表
富文本编辑器
调度器
数据透视网格
上传
报告查看器

键盘支持

为了满足可访问性标准并改善残障人士的用户体验，v24.1 为以下 Blazor UI 组件添加了键盘导航支持：

日期编辑
時間編輯
树视图
手风琴
组合框
列表框
标签框
富文本编辑器
上传
报告查看器

项目模板

#.NET 8 身份验证和授权

我们的 .NET 8 Blazor 项目模板包含一个选项，可将 ASP.NET Core Identity 和基于令牌的身份验证添加到您的项目中。除了必要的基础架构外，我们的模板还会生成由 DevExpress Blazor 组件提供支持的身份验证界面。

网格

#标题带

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

虽然最终用户可以重新排序带区内的列或将其移动到组面板，但带区之间的列移动受到限制。

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

#导出服务器端数据

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

DevExpress Blazor Grid 现在可以从远程数据源提取记录到导出的文档中。提取记录时，Grid 会显示加载指示器。为避免闪烁，指示器仅在预计提取时间内显示。有关此功能的更多信息，请参阅以下帮助主题：数据导出。

#新的单元格编辑器外观

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

#单元格编辑增强功能

我们的 Blazor Grid 的编辑单元格模式功能现已正式推出，并包含虚拟滚动支持。它现在附带以下增强功能：

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

#键盘导航增强功能和新选项卡导航

在 v24.1 中，我们的 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 中，我们的 Blazor Grid 组件支持以下内容 DateOnly：TimeOnly

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

#启用/禁用骨架

当虚拟滚动与本地数据一起使用时，DevExpress Blazor Grid 不再默认显示骨架。由于本地数据源中的行通常呈现得很快，因此这种新行为可带来更流畅的体验，减少视觉更新。

对于远程数据源（用于从服务器或数据库加载记录），骨架仍然默认启用。现在，您可以使用SkeletonRowsEnabled属性来控制骨架行为 - 如果服务器响应时间可接受，则为本地源启用它，或为远程源禁用它。

#悬停时突出显示行

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

图表

#注解

新的 Blazor DxChartAnnotation对象允许您创建图表注释 - 包含有关图表内容的信息的注释。您可以使用图像或文本内容填充注释。您还可以将注释锚定到图表元素（系列点或轴）或根据像素坐标定位注释。DevExpress Blazor Chart 组件还允许您根据需要自定义注释 - 您可以配置注释边框和阴影、图像和文本设置。

#条带

我们新的 Blazor DxChartAxisStrip对象允许您创建和配置轴条。您可以使用条带突出显示两个轴值之间的范围或某个值上方/下方的区域。这些突出显示的区域可帮助用户确定某个点是否在预定义范围内。您还可以将DxChartAxisStripLabel对象添加到条带标记以显示和配置条带标签。

#误差线

新的DxChartSeriesValueErrorBar对象允许您配置误差线（指示测量精度或不确定性）。它们在系列点旁边显示可能的值范围。误差线可以显示固定值或百分比、统计函数值或从数据源字段获取的误差值。

#工具提示增强功能

v24.1 为 DevExpress Blazor Chart 组件引入了扩展的工具提示功能。您现在可以在代码中更改各个系列点的工具提示可见性。要显示特定系列点的工具提示，请调用特定于组件的 ShowTooltip 方法重载（DxChart.ShowTooltip、DxPieChart.ShowTooltip或DxPolarChart.ShowTooltip）。要隐藏工具提示，请调用HideTooltip方法。

使用 v24.1，您还可以处理TooltipShowing事件以在工具提示出现之前获取有关工具提示的信息（或根据需要取消工具提示）。

#标签自定义增强功能

我们扩展了可用的标签自定义设置列表。现在，您可以使用Texts属性为每个点标签设置单独的文本。此外，您可以修改点标签的以下属性：

结盟
水平偏移
垂直偏移
旋转角度
显示零值
字体
边界

#实时更新增强功能

我们扩展了 Blazor Chart 的实时更新功能，并引入了Length和VisualRangeUpdateMode属性。这些增强功能允许图表在 Chart 数据发生变化时保留其视觉状态（缩放和滚动位置）。

#API 增强功能

饼图设置：

SegmentDirection-指定图表排列系列切片的方向。
StartAngle-指定图表定位第一个系列切片的角度。

轴设置：

WorkdaysOnly - 指定图表是否在轴上仅显示工作日。
WorkWeek - 指定 DxChart 将哪些工作日视为工作日。
工作日期- 指定 DxChart 视为工作日的日期。
假期- 指定 DxChart 标记为假期的日期。

轴范围设置：

长度— 指定范围长度。
MinVisualRangeLength - 指出了可视范围的最小长度。
VisualRangeUpdateMode-指定如果新点添加到数据源时可视范围的行为方式。

新的 ComboBox 和 TagBox

我们重建了 DevExpress Blazor ComboBox和TagBox组件，保留了现有 API，同时改进了视觉和数据层，以提高稳定性、视觉效果和性能。这些变化构成了即将推出的功能和增强功能的基础，其中许多功能和增强功能已在 v24.1 中提供。

#性能增强

ComboBox 和 TagBox 的整体性能得到了显著提升。打开下拉菜单、搜索或浏览项目等任务现在响应速度更快。此外，ComboBox/TagBox 的启动时间最多缩短了三倍。这提高了包含这些编辑器的表单以及内部使用 ComboBox/TagBox 的任何组件（例如 Blazor Grid、富文本编辑器、调度程序和工具栏）的整体性能。

#跨多列搜索

根据客户的反馈，我们的 ComboBox 和 TagBox 现在可以在任何定义的列中搜索文本，甚至是其值未显示在编辑框中的列。

在必要时使用新的SearchEnabled属性从搜索中排除特定列。

#新的搜索 API

除了“Contains”和“StartsWith”之外，ComboBox 和 TagBox 还包含“Equals”条件，用于在名称相似的项目集合中进行搜索。新的SearchTextParseMode属性还定义了编辑器如何解释以空格分隔的搜索字符串：

GroupWordsByAnd– 搜索词被视为由 AND 逻辑运算符分组的单独条件；仅显示与所有词匹配的项目。
GroupWordsByOr– 搜索词被视为按“或”逻辑运算符分组的单独条件；显示至少与其中一个词匹配的项目。
ExactMatch– 搜索词不被单独处理；仅显示与搜索文本匹配（完全匹配）的项目。

#新模板

我们引入了 ComboBox 和 TagBox 的新模板，以简化流行的自定义使用场景：

ColumnCellDisplayTemplate – 允许您为多列 ComboBox/TagBox 中的值实现自定义格式。
ItemDisplayTemplate / TagDisplayTemplate – 这些模板与ItemTemplate/类似TagTemplate（以前可用），但提供有关底层数据项、值和上下文中显示的文本的信息。
EmptyDataAreaTemplate – 允许您自定义 ComboBox/TagBox 弹出窗口不显示任何项目时显示的区域。

#键盘导航增强功能

ComboBox 和 TagBox 现在都在下拉菜单中使用客户端键盘导航引擎。这使得 Blazor Server 应用中的键盘导航响应更快，因为无需将每个按键发送到服务器。此外，与虚拟滚动结合使用时，键盘导航现在更加稳定。

列表框

#新的搜索和过滤 API

DevExpress Blazor 列表框引入了新的 API，允许您将其连接到外部搜索/过滤 UI 元素：

SearchText – 指定列表框用来过滤和突出显示搜索结果的文本。
SearchTextParseMode — 指定列表框如何解释由空格分隔的搜索字符串。
SetFilterCriteria / GetFilterCriteria / ClearFilter – 允许您使用 CriteriaOperator 语言应用过滤器（任何复杂程度）。

#新的 Scroll API

以下新 API 允许您滚动到特定的 ListBox 项：

MakeItemVisible – 滚动到具有指定可见索引的项目。
MakeDataItemVisibleAsync – 在列表中找到一个数据项并滚动到它。

日期编辑 & 时间编辑

#DateOnly 和 TimeOnly 支持

DevExpress Blazor日期编辑和时间编辑组件现在分别支持DateOnly和TimeOnly值。所有编辑器功能（包括掩码、格式化 API 和验证）现在都可以使用这些新数据类型正常运行。

文件管理

#新的上传外观

我们的 Blazor Upload 组件的文件列表具有改进的外观和感觉。为了使列表更易于理解和视觉紧凑，我们删除了常用的进度条，调整了 UI 元素的大小并重新排列，更新了图标，并向某些操作按钮添加了文本。

表单布局

#商品标题模板

新的DxFormLayoutItem.CaptionTemplateLayoutItem属性允许您在每个标题附近设置图标、按钮、链接或其他元素。

 Razor
<DxFormLayoutItem>
    <CaptionTemplate>
        <div class="email-caption">
            <label for="contactEmail">Email</label>
            <DxButton CssClass="info-icon-btn"
                      IconCssClass="info-icon text-info"
                      RenderStyle="@ButtonRenderStyle.None"
                      Click="() => IsInfoOpen = !IsInfoOpen" />
            <DxFlyout @bind-IsOpen=@IsInfoOpen
                      PositionTarget=".info-icon-btn"
                      PreventCloseOnPositionTargetClick="true"
                      Width="240">
                Email must contain the company's domain name.
            </DxFlyout>
        </div>
    </CaptionTemplate>
    <Template>
        <DxTextBox @bind-Text="@Email" InputId="contactEmail"/>
    </Template>
</DxFormLayoutItem>

富文本编辑器

#新的表 API

使用 v24.1，Blazor 的 DevExpress 富文本编辑器允许您在运行时修改表格布局、装饰和结构。

   Razor
<DxRichEdit @ref="@richEdit" />
@code {
    DxRichEdit richEdit { get; set; }
    @* ... *@
        try {
        @* ... *@
            var columnCount = 4;
            var rowCount = 5;
            richEdit.DocumentAPI.BeginUpdate();
            await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
            for (int i = 0; i < rowCount; i++)
                for (int j = 0; j < columnCount; j++) {
                    var myTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
                    var cellPosition = myTable.Rows[i].Cells[j].Interval.Start;
                    await richEdit.DocumentAPI.AddTextAsync(cellPosition, "Row=" + (i + 1) + ",Column=" + (j + 1));
                }
            richEdit.DocumentAPI.EndUpdate();
            @* ... *@
        }
        catch (OperationCanceledException e) {
            @* ... *@
        }
}

#HTML 导出/导入

DevExpress 富文本编辑器 (Blazor) 现在支持 HTML 格式的文档导入/导出。您可以将 HTML 标记添加到主子文档（AddHtmlAsync方法重载）、获取主子文档的 HTML 文本和标记（GetHtmlAsync方法重载），并将文档内容下载到 HTML 格式的文件中。

#上下文菜单自定义

v24.1 为 DevExpress Blazor 富文本编辑器引入了扩展的 UI 自定义选项。您现在可以自定义组件的上下文菜单和相关子菜单。处理CustomizeContextMenu事件以：

添加或删除内置菜单项
添加自定义菜单项
定制项目外观/行为。

使用 v24.1，您还可以使用ContextMenuEnabled属性控制上下文菜单的可见性。

Razor
<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        if (selection.Intervals[0].Length > 0) {
            var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
            textToSearch = span.Text.Trim();
        }
        else
            textToSearch = null;
        var searchItem = items.AddCustomItem(0, "Google Search...", async () => {
            var url = String.Format("https://www.google.com/search?q={0}", HttpUtility.UrlEncode(textToSearch));
            await JSRuntime.InvokeVoidAsync("open", url, "_blank");
        });
        searchItem.Enabled = !string.IsNullOrEmpty(textToSearch);
        searchItem.IconCssClass = "search-icon";
        items.Remove(RichEditContextMenuItemNames.CutSelection);
        items.Remove(RichEditContextMenuItemNames.CopySelection);
        items.Remove(RichEditContextMenuItemNames.Paste);
        var clipboardItem = items.AddCustomItem(1, "Clipboard");
        clipboardItem.BeginGroup = true;
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
    }
}

调度器

#多种资源

我们的 Blazor Scheduler 允许用户将多个资源分配给一个约会。使用 v24,1，用户可以创建有多个参与者的会议、小组活动或需要协调多个资源的服务。要启用此功能，请使用EnableMultipleResources属性。启用后，约会表单将允许在资源字段中进行多项选择：

所有选定的资源将显示在约会工具提示中：

如果调度程序按资源分组，则多资源约会将出现在所有选定的资源下。

#内置滚动条

当单元格不适合控件边界/大小时，DevExpress Blazor Scheduler 组件现在会自动显示滚动条。要指定 Scheduler 边界/大小，请使用 CSS 修改宽度/高度参数：

Razor
<style>
    .my-scheduler {
        height: 600px;
    }
</style>
<DxScheduler ... CssClass="my-scheduler"/>

#滚动 API

v24.1 附带了新的ScrollTo()方法。此方法将视图区域滚动到指定的日期或约会。使用时，ScrollTo()可以帮助您将用户注意力集中在当前显示的视图中最重要的时间/约会/事件上（例如，工作日的开始）。

Razor
<DxScheduler ... @ref="Scheduler" />
@code {
DxScheduler Scheduler { get; set; }
DesiredDate = new DateTime(2024, 05, 14)
// ...
protected override void OnAfterRender(bool firstRender) {
  base.OnAfterRender(firstRender);
        if (firstRender) {
              Scheduler.ScrollTo(DesiredDate);
        }
    }
}

#重复表单定制

我们增强了 Scheduler 的AppointmentFormShowing事件。现在，它允许您自定义 Appointment 和 Recurrence 表单的重复选项。例如，您可以根据需要修改 Appointment 表单的 Repeat 部分中可用的项目列表：

...或者修改重复表单中的重复结束项目列表和工作日列表：

以下代码片段自定义了 Scheduler 的重复选项：

Razor
<DxScheduler ...  AppointmentFormShowing="OnAppointmentFormShowing"/>
 
void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo.RepeatItems = new List<SchedulerRecurrenceType>() {
            SchedulerRecurrenceType.Yearly,
            SchedulerRecurrenceType.Weekly,
            SchedulerRecurrenceType.Never
        };
        args.FormInfo.RecurrenceFormInfo.RepeatEndItems = new List<SchedulerRecurrenceRange>() {
            SchedulerRecurrenceRange.OccurrenceCount,
            SchedulerRecurrenceRange.EndByDate
        };
        args.FormInfo.RecurrenceFormInfo.WeekDayItems.Remove(SchedulerWeekDays.WeekendDays);
    }
}

#日、周、工作周视图 - 最小单元格宽度

您现在可以指定日、周和工作周视图中日单元格的最小宽度。将整数值传递给CellMinWidth属性以像素为单位设置此宽度。

窗口和弹出窗口

#使用多个窗口元素进行拖放

禁用新的DxPopup.AllowDragByHeaderOnly / DxWindow.AllowDragByHeaderOnly选项，以允许用户通过窗口的标题、正文或页脚拖放窗口。

相关产品

最新文章

相关文章