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

ASP.NET Team Blog
09 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.

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.

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

Tooltip

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.

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.

13 comment(s)
Marcelo G. Fonseca
Marcelo G. Fonseca
Congratulations! Is Blazor Server Side Preview 9 already safe to build a production system? 
9 September, 2019
Abdullah AlFifi
Abdullah AlFifi
Is RTL direction suported in grid and other blazor components? 
9 September, 2019
Yahya
Yahya
Tried the demos. Really nice and slick. Thanks for the hard work.
10 September, 2019
Paul V (DevExpress Support)
Paul V (DevExpress Support)

Marcelo,

 

Thank you for the congratulations.

 

As Microsoft states, .NET Core 3.0 is close to the final stage. They claim that .NET Core 3.0 Preview 9 can be used in production. See the "Go Live" paragraph of the Announcing .NET Core 3.0 Preview 9 blog post. I believe that developers can start Blazor to work on real-life web applications. However, I would use an officially launched version for my production application.

10 September, 2019
Paul V (DevExpress Support)
Paul V (DevExpress Support)

Abdullah,

 

Currently, RTL is not supported. This task is in our backlog. We will consider implementing it in the future.

10 September, 2019
Stephen J White
Stephen J White
Man this is awesome, I'm glad to see you guys working so hard and fast on your Blazor suite.  Thanks for getting the documentation up too, btw.
10 September, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
Thanks, and stay tuned for the upcoming release too...
10 September, 2019
MatthewHughes_
MatthewHughes_
Very cool, I have a project coming up in the next few weeks I think I'll give Blazor a go.
10 September, 2019
Noufal Aboobacker 1
Noufal Aboobacker 1
SyncFusion Blazor controls have way more features than DevExpress. Please provide a spinning buttons similar to SyncFusion.
16 September, 2019
Juan Betancourt
Juan Betancourt
Calm down, this is not a race
16 September, 2019
Noufal Aboobacker 1
Noufal Aboobacker 1
@Juan As a loyal customer I want DevExpress to be always on top. And what I wish is by the time Blazor becomes RTM DevExpress should have everything available as its DevExtreme library. :)
16 September, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Noufal, thanks, there's many things we have planned for our Blazor library and we appreciate your feedback. We'll take your request into consideration for our future plans. Could you tell me your scenario for the buttons please


@Juan appreciate your continued support.

17 September, 2019
Noufal Aboobacker 1
Noufal Aboobacker 1

Hi @Mehul,

please take a look at this link. All the asynchronous operations needs a waiting indicator sort of feedback.

https://www.syncfusion.com/blazor-components/blazor-progress-button

And it would be nice to have a LookUpEdit similar to DevExtreme library. These are most commonly used controls.

Thanks for your understanding.


17 September, 2019

Please login or register to post comments.