Blazor Components - DataGrid and Scheduler Enhancements (available in Beta #3)

ASP.NET Team Blog
10 September 2019

The third Beta of the DevExpress UI for Blazor is now available. This update includes a series of enhancements for both our Blazor Data Grid and Scheduler component (see below). It also includes support for Blazor Preview 9 and updates to our online documentation.

Blazor Preview 9 Support

Last week, Microsoft announced the release of .NET Core 3.0 Preview 9. Our Blazor components fully support Preview 9 with our Beta 3 release.

Data Grid

We've added four major features to our Blazor Data Grid:

Column Reorder

You can now drag a column header and reposition it to change column order. Two arrows indicate valid drop positions.

Note: The edit form displays editors in the same order as columns in the grid. You can use the EditFormVisibleIndex property to arrange editors in the edit form as needed.

Column Groups

Enable the Group Panel within the Blazor Data Grid to allow end-users to group data by individual columns.

<DxDataGrid … ShowGroupPanel="true">
Note: Group panel column order is of consequence whenever you group data against multiple columns. The grid groups data by column values sequentially (starting from the leftmost column in the group panel).
DevExpress Blazor Grid - Column Groups

Column order in the group panel matters when you group data by several columns. The grid groups data by each column one by one (starting from the left).

To exclude a column from grouping, set its AllowGroup property to false.

<DxDataGridColumn AllowGroup="false"></DxDataGridColumn>

To group data in code, specify the column's GroupIndex property to define its grouping priority. The lower the value, the higher a column's priority in grouping. In the following example, our Blazor Data Grid first groups data by a column with GroupIndex = 0 and then - by a column with GroupIndex = 1.

<DxDataGridComboBoxColumn GroupIndex="0"></DxDataGridComboBoxColumn>
<DxDataGridColumn GroupIndex="1"></DxDataGridColumn>

To see this feature in action, please refer to our Data Grid online demo.

By default, grouped column data is not displayed. Set the ShowGroupedColumns property to true to display data.

Master-Detail Layout

Our Blazor Data Grid allows you to build master-detail layouts ( DetailRowTemplate ) of any complexity and depth. Our template implementation is not limited and allows you to address a broad range of usage scenarios..

To see our master-detail implementation in action, please review our online Master-Detail View demo. The template used within this demo contains a detailed Data Grid inside a plain HTML.

Multiple Row Selection

To select multiple rows in the DevExpress Blazor Data Grid, click a row, a command checkbox (if shown), or use our Data Grid API. The SelectionMode property allows you to specify selection mode:

  • Single Selection (default behavior) - Only one data row can be selected at any one time. See our Single Data Row Selection online demo.

  • Multiple Selection - Multiple data rows can be selected at any one time. See our Multiple Data Rows Selection online demo.

  • Optimized Multiple Selection - In this mode, the component does not store row data objects and information about all selected rows - The grid maintains row key values instead (make sure the KeyFieldName property is initialized). If you select all rows via the Grid’s UI or its API and then unselect multiple rows, the component only stores unselected row keys (and vice versa). This reduces the amount of stored data. We recommend you use this mode if your Blazor Grid contains a significant number of rows. See our online demo for more information.

  • None - Row selection is disabled.


Appointment Editing

DevExpress Scheduler for Blazor now includes a popup edit form to edit appointment data. The default edit form only displays primary data input fields (it hides others). Click the "Expand Form" button in the top-right corner to display all available fields.

DevExpress Blazor Scheduler

To create a new appointment quickly, select a time range in the Scheduler. The Scheduler component displays an appointment within the view and automatically invokes the edit form:

DevExpress Blazor Scheduler

Drag-And-Drop and Resize Appointments

Though you can change appointment time range within the Edit Form, our Blazor Scheduler component allows you to reschedule the appointment via drag & Drop (drag the appointment to a new time cell within the current view or resize the appointment to change the current time range):

DevExpress Blazor Scheduler


Click or tap on an appointment to view its full description. In addition, the Scheduler displays a tooltip with detailed appointment information:

DevExpress Blazor Scheduler

Note: At present, all Scheduler features described herein are enabled by default. We will give you the ability to customize and disable these features in future versions.


I am happy to announce that our online Blazor documentation is now available.


Your feedback matters and I would love to hear how you plan to use these new features in your next Blazor application.

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.
No Comments

Please login or register to post comments.