本月，DevExpress Grid for Blazor 正式发布啦。DevExpress 最新版本 v21.2.6 包括几个关键的 Grid 增强功能，我将在本文中简要介绍：迁移指南和维护模式。我们建议您使用新的 Blazor 网格而不是以前的组件（数据网格）。如果您不知道怎么操作，这里有一份详细的迁移指南文档，可以帮助您：从数据网格迁移到网格（联系我们获取）。
之前的网格组件现在处于维护支持模式，其不会添加新特性或功能。
服务器模式数据源
Blazor Grid 现在支持服务器模式数据绑定。在基于服务器的应用程序中处理大型数据集合时使用此模式。服务器模式允许您对数百万条记录快速执行数据操作，通常在几秒钟内。以下代码演示了如何将 DevExpress Grid for Blazor 绑定到服务器模式下的大型数据源：
@*…*@
@code {
EntityInstantFeedbackSource InstantFeedbackSource { get; set; }
NorthwindContext Northwind { get; set; }
protected override void OnInitialized() {
Northwind = NorthwindContextFactory.CreateDbContext();
InstantFeedbackSource = new EntityInstantFeedbackSource(e => {
e.KeyExpression = “OrderId”;
e.QueryableSource = Northwind.Orders;
});
}
public void Dispose() {
InstantFeedbackSource?.Dispose();
Northwind?.Dispose();
}
}
支持可观察数据收集
可以将 Blazor 网格绑定到实现 INotifyCollectionChanged 或 IBindingList 接口的数据集合。此集合通知 Grid 相关更改（添加或删除项目时，刷新整个集合时等）。网格将自动更新其数据以反映适当的变化。
@*…*@
@code {
ObservableCollectionWeatherForecastData { get; set; }
// …
}
主从视图
Blazor Grid 组件允许您创建任何复杂性和深度的分层布局。例如，您可以使用嵌套网格来可视化两个数据表之间的主从关系，或者在所有列的每个网格数据行下显示预览部分。
以下代码演示了如何创建两个具有 Masted-Detail 关系的网格。首先创建一个主网格：
@code {
IGrid Grid { get; set; }
object MasterGridData { get; set; }
protected override async Task OnInitializedAsync() {
MasterGridData = await NwindDataService.GetCustomersAsync();
}
protected override void OnAfterRender(bool firstRender) {
if(firstRender) {
Grid.ExpandDetailRow(0);
}
}
}
请注意，主网格包含一个 DetailRowTemplate，其中包含一个自定义 Blazor Grid_MasterDetail_NestedGrid_DetailContent 组件。该组件封装了一个电话数据字段和附加的详细网格：
Contact Phone: @Customer.Phone
@code {
[Parameter]
public Customer Customer { get; set; }
object DetailGridData { get; set; }
protected override async Task OnInitializedAsync() {
var invoices = await NwindDataService.GetInvoicesAsync();
DetailGridData = invoices
.Where(i => i.CustomerId == Customer.CustomerId)
.ToArray();
}
}
行预览
网格现在允许您显示数据行的预览部分。这些部分可以显示任何内容，包括表格、数据源字段中的值、自定义文本等。将所需内容添加到 DetailRowTemplate 并将 DetailRowDisplayMode 设置为等于 GridDetailRowDisplayMode.Always。此设置允许 Blazor Grid 展开详细的行，而最终用户不会意外折叠它们。
@* … *@ @{ var employee = (Employee)context.DataItem; @employee.Notes }
列调整大小
Grid 现在支持不同的列大小调整模式。使用 ColumnResizeMode 属性来指定用户是否以及如何调整 Grid 列的大小。
@_…_@
列可见性和列选择器
我们实现了一个 API 来管理代码中的列可见性。使用新的 Visible 和 VisibleIndex 属性来管理列的可见性和顺序。
Grid 还允许用户使用其集成的列选择器来显示、隐藏和重新排序列。您可以从包含我们网格的 Razor 页面的任何区域调用列选择器。
@*…*@
@code {
// …
DxGrid Grid { get; set; }
void OnClick() {
Grid.ShowColumnChooser(“.column-chooser-button”);
}
}
DevExpress 项目模板中的网格
Blazor 的 DevExpress 项目模板现在包括 Grid 组件。使用这些模板通过快速创建一个功能齐全的 Blazor 应用程序来节省时间，该应用程序包含我们预配置和即用型的 Grid 组件。