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

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.

Column Groups

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

<DxDataGrid … ShowGroupPanel="true">

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.

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.

Scheduler

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.

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:

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):

Tooltip

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

Documentation

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

Feedback

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