新网格控件 DevExpress Grid for Blazor 正式发布！

　　本月，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 组件。