Blazor - New Grid (Official Release)

ASP.NET Team Blog
10 March 2022

I'm happy to announce the official release of DevExpress Grid for Blazor. Our most recent release (v21.2.6) includes several key Grid enhancements that I'll briefly describe in this post.

Migration Guide and Maintenance Mode

We recommend using the new Grid for Blazor instead of the previous component (Data Grid). Our team has created a detailed migration guide document that will help you: Migrate from Data Grid to Grid.

Our previous grid component is now in maintenance support mode. Therefore, we do not plan to add new features or capabilities to this component. However, our support team will address any issues you may encounter with it.

Server Mode Data Source

Our Blazor Grid now supports Server Mode data binding. Use this mode when working with large data collections in Server-based applications. Server mode allows you to quickly execute data operations against millions of records, typically within a few seconds. The following code demonstrates how to bind DevExpress Grid for Blazor to a large data source in Server mode.

<DxGrid Data="InstantFeedbackSource">
  <Columns>
    <DxGridDataColumn FieldName="ShipName" />
    <DxGridDataColumn FieldName="ShipCity" />
    @*...*@
  </Columns>
</DxGrid>

@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();
  }
}

Demo | Documentation

Support for Observable Data Collections

You can bind the Blazor Grid to a data collection that implements the INotifyCollectionChanged or IBindingList interface. This collection notifies the Grid about relevant changes (when items are added or removed, when the entire collection is refreshed, etc.). The Grid will update its data automatically to reflect appropriate changes.

<DxGrid Data="@WeatherForecastData">
  <Columns>
  @*...*@
  </Columns>
</DxGrid>

@code {
  ObservableCollection<WeatherForecast> WeatherForecastData { get; set; }
  // ...
}

Demo | Documentation

Master-Detail View

Our Blazor Grid component allows you to create hierarchical layouts of any complexity and depth. For example, you can use a nested grid to visualize a master-detail relationship between two data tables or to display preview sections under each grid data row across all columns.

The following code demonstrates how to create two grids with Masted-Detail relationship. Start by creating a Master Grid :

<DxGrid @ref="Grid" Data="MasterGridData" AutoCollapseDetailRow="true">
  <Columns>
    <DxGridDataColumn FieldName="ContactName" SortIndex="0" />
    <DxGridDataColumn FieldName="CompanyName" />
    <DxGridDataColumn FieldName="Country" />
    <DxGridDataColumn FieldName="City" />
  </Columns>
  <DetailRowTemplate>
    <Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" />
  </DetailRowTemplate>
</DxGrid>
@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);
    }
  }
}

Note that the Master Grid includes a DetailRowTemplate which contains a custom Blazor Grid_MasterDetail_NestedGrid_DetailContent component. This component encapsulates a Phone data field and additional Detailed Grid :

<div class="mb-2">
    Contact Phone: @Customer.Phone
</div>

<DxGrid Data="DetailGridData"
        PageSize="5"
        AutoExpandAllGroupRows="true">
  <Columns>
    <DxGridDataColumn FieldName="OrderId" DisplayFormat="d" GroupIndex="0" />
    <DxGridDataColumn FieldName="ProductName" Width="40%" />
    <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
    <DxGridDataColumn FieldName="Quantity" />
    <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
    <DxGridDataColumn FieldName="ExtendedPrice" DisplayFormat="c" />
  </Columns>
  <GroupSummary>
    <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                       FieldName="ExtendedPrice"
                       FooterColumnName="ExtendedPrice" />
  </GroupSummary>
</DxGrid>

@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();
  }
}

Blazor-master-detail-data-grid

Demo | Documentation

Row Preview

The Grid now allows you to show preview sections for data rows. These sections can display any content, including tables, values from data source fields, custom text, etc. Add the required content to the DetailRowTemplate and set the DetailRowDisplayMode equal to GridDetailRowDisplayMode.Always. This setting allows the Blazor Grid to expand the detailed rows without an end-user accidentally collapsing them.

<DxGrid Data="GridData"
        DetailRowDisplayMode="GridDetailRowDisplayMode.Always">
  <Columns>
      @* ... *@
  </Columns>
  <DetailRowTemplate>
    @{
      var employee = (Employee)context.DataItem;
        <text>@employee.Notes</text>
    }
  </DetailRowTemplate>
</DxGrid>

Demo | Documentation

Column Resize

The Grid now supports different resize modes for columns. Use the ColumnResizeMode property to specify whether and how users can resize Grid columns.

<DxGrid Data="@Data"
        ColumnResizeMode="GridColumnResizeMode.NextColumn">
  <Columns>
    @_..._@
  </Columns>
</DxGrid>

blazor-data-grid-column-resize

Demo | Documentation

Column Visibility and Column Chooser

We implemented an API to manage column visibility in code. Use the new Visible and VisibleIndex properties to manage column visibility and order.

The Grid also allows users to display, hide, and reorder columns with its integrated Column Chooser. You can invoke the Column Chooser from any area of the Razor page that contains our Grid.

<DxButton Text="Column Chooser"
          RenderStyle="ButtonRenderStyle.Secondary"
          CssClass="column-chooser-button"
          Click="OnClick" />
<DxGrid Data="@Data" @ref="Grid">
  <Columns>
    <DxGridDataColumn FieldName="Country" />
    <DxGridDataColumn FieldName="Phone" Visible="false" />
    @*...*@
  </Columns>
</DxGrid>

@code {
  // ...
  DxGrid Grid { get; set; }
  void OnClick() {
    Grid.ShowColumnChooser(".column-chooser-button");
  }
}

blazor-data-grid-column-visibility-and-column-chooser

Demo | Documentation

Grid in DevExpress Project Templates

DevExpress project templates for Blazor now include the Grid component. Use these templates to save time by quickly creating a fully-functional Blazor application that contains our Grid component pre-configured and ready-to-use

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Rasmus Jensen
Rasmus Jensen
Now we just need some row drag and drop support and we are there to what we need so far
10 March 2022
Rick Mathers
Rick Mathers

All the changes look great, lucky for me; I am about to start a new project that will be using data grids a lot.  All my Blazor projects are WebAssembly (not Blazor Server), so no Server Mode Data Source.

10 March 2022
Jaime Alvarez [VOLUNDAT]
Jaime Alvarez
Great news!!!

I hope soon the release of Export to Excel and fixed columns

Thanks DX Team!

10 March 2022
Milos Glosik
Milos Glosik
It looks good.
In order to put it into production, I have to wait for the implementation of Load / Save Layout, it is required by the customer.
 
11 March 2022
Akin GUNES
Akin GUNES

We were waiting for long time for this. All enhancements look great, congrugulations and thanks to the team.

Is it integrated Xaf Blazor UI?

Especially, server mode, reading column widths from the model and persist back to model when changed in runtime, column resize and runtime embedded column chooser with capability adding new nested properties which is not included initially.   

Also how about column filters (not auto filter row) and custom filter editor? 

11 March 2022
Chris Holland
Chris Holland

Until I can Save and Load layouts and have a toolbar I can't swap to the new grid as I have used these features a lot in my current projects.


11 March 2022
Murray Clark 1
Murray Clark 1
When is Export to Excel going to be included?
11 March 2022
Dietmar-Konrad Kurok
Dietmar-Konrad Kurok
Great news! But also have to wait for a complete replacemnt of DxDataGrid until DxGrid has Load- and Save for the layout!
14 March 2022
CRM-b2d00631-4cfd-40e1-afd8-492af617b62f
Customer221770

Great work, a few questions:

- How to do Multi Line headers?

- Is export excel/csv coming ?

- Extended filter builder ?

Thanks!

16 March 2022
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
Thank you for your feedback on our new Grid for Blazor. Many of your requested features are already on our todo list and we're going to implement them in future releases:
  • @Rick, For Web Assembly, we recommend that you use a custom data source: @Jaime & @MurrayClark1, Export to Excel & Fixed Columns are on our short-term todo list so please keep an eye on this blog for updates.
  • @Akin, The XAF team has Blazor plans and I'll ask them to respond to you question. Regarding the column filters, please contact our support team.
  • @Chris, while a toolbar can be implemented outside the grid, we have plans for an embedded toolbar.
  • @Ramsus, Drag and drop is not our current plans.
  • @Customer221770, exporting is planned. Other items will likely be in a future release.

  • Regarding save and load layouts, we agree that this is an important feature and we plan to implement it in a future release. Once we have an estimated plan for its release, we'll update this blog.
16 March 2022
Dennis (DevExpress)
Dennis (DevExpress)
André Bastiani
André Bastiani

Hello Mehul Harry,

Thank you for the updates.

I think that row drag and drop is very important, you should consider implementing this feature in the future.



18 March 2022
Customer8330
MMI Todd
I would like to see Drag & Drop feature as well.  This is a huge time saver feature for our employees and would love to use in DxGrid.   Great work thus far.
22 March 2022
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Simple information, Thanks for the feedback. It looks like you're using the legacy DxDataGrid because our new Blazor grid does not have the setting you mentioned. Please email me at mharry@devexpress.com for more info. Thanks.

24 March 2022
Bradley Boyd
Bradley Boyd
I would also like to add my voice asking for the row Drag and Drop / reorder feature as well. 
Thank you for the great product so far.
4 April 2022

Please login or register to post comments.