界面控件DevExpress Blazor v26.1新版亮点 - TreeList & 数据编辑器

DevExpress Blazor控件为使用C#为Blazor服务器和Blazor WebAssembly创建高影响力的用户体验，其附带了70+个原生的Blazor组件（包括DataGrid、Pivot Table、Scheduler、图表、数据编辑器和报表）。

在上文中（点击这里回顾>>）为大家介绍了DevExpress Blazor v26.1中增强的智能粘贴和数据透视表功能，本文将继续介绍新版本中Grid 和 TreeList控件增强功能，希望能帮助到大家~欢迎点赞关注哦，不定期更新~

DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316

Blazor TreeList

未绑定的列

DevExpress Blazor TreeList组件现在支持未绑定的列，这些列显示未存储在基础数据源中的值。使用未绑定的列来显示补充/计算数据，而不修改原始数据模型。

以下API允许用户使用数据填充未绑定的列：

DxTreeList.UnboundColumnData --- 允许用户实现自定义逻辑或从自定义/外部数据源获取列值。
DxTreeListDataColumn.UnboundExpression --- 指定用于计算列值的表达式，导出到Excel时，可以将未绑定表达式导出为公式。

Razor

XML 复制代码

<DxTreeList Data="TreeListData"
            UnboundColumnData="TreeList_UnboundColumnData" ... >
    <Columns>
        <DxTreeListDataColumn FieldName="AprilSales" />
        <DxTreeListDataColumn FieldName="MaySales" />
        <DxTreeListDataColumn FieldName="JuneSales" />
        <DxTreeListDataColumn FieldName="Q2Sales" Caption="Q2 Sales"
                              UnboundType="TreeListUnboundColumnType.Decimal"
                              UnboundExpression="[AprilSales] + [MaySales] + [JuneSales]" />
        <DxTreeListDataColumn FieldName="Q2YoYChange" Caption="Q2 YoY Change (%)"
                              UnboundType="TreeListUnboundColumnType.Decimal" />
    </Columns>
</DxTreeList>

@code {
    // ...
    void TreeList_UnboundColumnData(TreeListUnboundColumnDataEventArgs e) {
        if(e.FieldName == "Q2YoYChange") {
            var sales = ((SalesByRegion) e.DataItem);
            var currentValue = (decimal)e.GetRowValue("Q2Sales");
            var prevValue = sales.AprilSalesPrev + sales.MaySalesPrev + sales.JuneSalesPrev;
            e.Value = (currentValue - prevValue) / currentValue;
        }
    }
}

Blazor Data Editors（数据编辑器）

可调焦按钮

DevExpress Blazor数据编辑器包括用于命令按钮的新的可聚焦选项，一旦激活，按钮就包含在页面的选项卡序列中，用户可以使用键盘与它们交互。

Razor

XML 复制代码

<DxDateEdit @bind-Date="@DateTimeValue"
            ShowDropDownButton="false">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
                        Tooltip="Previous Date"
                        Position="@EditorButtonPosition.Left"
                        Focusable="true"
                        Click="@(_ => OnChangeDayButtonClick(false))" />
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
                        Tooltip="Next Date"
                        Position="@EditorButtonPosition.Right"
                        Focusable="@true"
                        Click="@(_ => OnChangeDayButtonClick(true))" />
        <DxDateEditDropDownButton Focusable="true" />
    </Buttons>
</DxDateEdit>

键盘和鼠标滚轮交互选项

DevExpress官方添加了新的选项来控制用户是否可以使用箭头键和鼠标滚轮更改编辑器值：AllowUpDownArrowKeys和AllowMouseWheel，以下编辑器类支持这些新属性：

DxMaskedInput, DxMaskedInputSettings
DxSpinEdit, DxSpinEditSettings
DxDateEdit, DxDateEditSettings (如果日期编辑器使用掩码，则应用新属性)
DxTimeEdit, DxTimeEditSettings (如果日期编辑器使用掩码，则应用新属性)

将AllowUpDownArrowKeys和AllowMouseWheels属性设置为false，以防止意外更改，并确保更可控的用户体验。

Razor

XML 复制代码

<DxSpinEdit @bind-Value="@NumericValue"
            AllowUpDownArrowKeys="false" />

<DxDateEdit @bind-Date="@DateTimeValue"
            Mask="@DateTimeMask.ShortDate"
            AllowUpDownArrowKeys="false"
            AllowMouseWheel="false" />

<DxGrid Data="@employees" EditMode="GridEditMode.EditRow">
    <Columns>
        @*...*@
        <DxGridDataColumn FieldName="HireDate">
            <EditSettings>
                <DxDateEditSettings Mask="@DateTimeMask.ShortDate" AllowUpDownArrowKeys="false" AllowMouseWheel="false" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

API功能增强

官方向DxComboBoxSettings类添加了新属性（包含自动生成的组合框编辑器的设置）：

KeyFieldName/KeyFieldNames --- 在比较项时，指定一个或多个用作标识符的字段。
DataLoadMode --- 指定组合框如何加载数据：Auto - 当浏览器加载网页时，组件缓存数据；OnDemand - 每当用户打开下拉窗口时，组件都会加载其数据。

UI/UX功能增强

列表编辑器 - 设计更新

官方更新了DevExpress Fluent主题的Blazor列表编辑器（列表框、组合框、标签框）的设计：

项目字体大小和填充
项目组样式
禁用/选定项目颜色
添加了列表项之间的间距
圆角项目角
删除了额外边框

List Box

ComboBox

TagBox

Clear Button - 背景色更新

官方更新了Blazor编辑器（Bootstrap和DevExpress经典主题）中使用的Clear按钮的背景色。