Data Grid for Blazor - Group and Total summary, Column Resize, Fixed Columns, and more (available in v20.2)

ASP.NET Team Blog
04 November 2020

As you may know, last week marked the official release of v20.2, our next major update. If you missed the announcement or would like to know more about this release, please refer to the following webpage for more information: "What's New in v20.2".

v20.2 includes several new Blazor UI components. It also includes a series of new features/capabilities for existing DevExpress Blazor UI controls. In this post, I'll focus on the most recent enhancements to our Blazor Data Grid and Blazor Data Editor components. Rest assured, I'll discuss other Blazor enhancements in future posts.

Before I proceed, a quick word about v20.1 and our expired free Blazor UI component offer. If you downloaded v20.1 free-of-charge, you are entitled to use v20.1 as long as you wish. With our v20.2, our Blazor UI controls are no longer available free-of-charge. Should you require additional information on v20.1, please forward your comments to clientservices@devexpress.com.

.NET 5.0 Support

Microsoft should launch .NET 5.0 in November, but you can test .NET 5.0 with our Blazor components today. v20.2.3 supports .NET 5.0 Release Candidate 2.

To learn more about what's new for Blazor in .NET 5, watch this interview with Microsoft PM for Blazor, Dan Roth.

Once .NET 5 ships officially, we’ll update our v20.2 Blazor product line accordingly.

DevExpress Installer

We've made our Blazor components easier to download and install. DevExpress Blazor UI components can now be installed via the DevExpress Unified Installer.

If you own an active ASP.NET/DXperience/Universal Subscription, you can download our Unified Installer here: Download Manager.

While you can still install our Blazor components with NuGet, consider using our Unified Installer if the following is of value to your business:

  • Demos: When you install our Blazor UI components via our Unified Installer, you’ll have access to all DevExpress Blazor demos locally. Full demo source code is also installed so you can load any demo within your local Visual Studio environment.
  • Project Templates: The DevExpress Unified Installer includes our Blazor project templates. If you require project templates, installation via our Unified Installer is the way to go.

DevExpress Blazor Project Templates

Documentation

Blazor Data Grid

Total and Group Summary Computation

Our Blazor Data Grid can compute summaries (using aggregate functions such as SUM, MIN, MAX, etc) for both the entire contents of the grid and each individual group level. "Total" summaries are calculated across all grid records and displayed within the grid’s footer. "Group" summaries are calculated across rows in individual groups and displayed within group rows. If you have questions about this particular capability, please post your question in the comment section below.

DevExpress Blazor Data Grid Group and Total Summary

Blazor Data Grid – How to Create Total or Group Summaries

To create Total or Group summaries, simply add DxDataGridSummaryItem objects to the TotalSummary or GroupSummary collection.

Key DxDataGridSummaryItem properties are summarized below.

  • Field – Specifies the name of the data field whose values are used to calculate the summary.
  • SummaryType – Specifies the aggregate function (SUM, MIN, MAX, AVG, etc) used. – Specifies the appropriate aggregate function (SUM, MIN, MAX, AVG, etc) used.
  • ShowInColumn – Specifies the name of the column used to display the summary.
  • DisplayFormat – Specifies the desired summary display format. The ‘{0}’ placeholder returns the summary value and ‘{1}’ returns the parent column’s caption.

Demo | Documentation

Resize Columns

The DevExpress Blazor Data Grid allows users to resize columns as needed. Users can move the mouse pointer over the right border of a column to display a double-sided arrow. Users can drag column border to change column width.

To enable column resize operations, set the ColumnResizeMode property to one of the following values:

DevExpress Blazor DataGrid - Column Resize

Demo | Documentation

Fixed Columns

Our Blazor Data Grid allows you to anchor columns to its left or rightmost edge. Fixed columns can help improve data readability as columns fixed to the right or left remain visible when users scroll the grid horizontally. To fix a column, set its FixedStyle property to DataGridFixedStyle.Left or DataGridFixedStyle.Right.

DevExpress Blazor DataGrid - Fixed and Frozen Columns

Demo | Documentation

Other Recent Enhancements

In case you missed it, we added the following Data Grid features in a recent minor release:

New Popup Edit Form

End-users can now edit column values within a popup form. To activate Popup Edit Form mode, set the EditMode property to PopupEditForm.

DevExpress Blazor DataGrid - Popup Edit Form

Demo | Documentation

Incremental Filtering

End-users can filter list items dynamically, based upon the text typed into the editor's input box. Filter modes include: Contains and StartsWith.

DevExpress Blazor DataGrid - Incremental Filtering

Documentation

Blazor Data Editors

New Time Editor

This release ships with a new time editor for Blazor:

DevExpress Blazor Time Editor

Our Time Edit component includes the following features:

  • TimeSpan / DateTime binding
  • Integrated drop-down time picker
  • 12 / 24-hour format support
  • Min / max time support
  • Read-only and disabled states
  • Nullable time
  • Clear button

Demo | Documentation

Date Edit - Display Time

The Date Edit component can now display time. Set the TimeSectionVisible property to true to add the time section to the component.

DevExpress Blazor Date Edit Time Section

To format a time value in display and edit modes, use the DisplayFormat and Format properties.

Demo

Should you have any questions about these new features, or if you require assistance on our Blazor product line, please comment below. Please remember, that the features described in this post relate to v20.2. v20.2 is not available free-of-charge. The capabilities described in this post are available to those who own an active ASP.NET/DXperience/Universal Subscription.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
16 comment(s)
Jacek Kosiński
Jacek Kosiński

great!

what about inline editing in grids?

4 November 2020
Jaime Alvarez [VOLUNDAT]
Jaime Alvarez

Hi,

Unfortunately even though the devexpress components are excellent they do not have clear release dates and requests for new requirements sometimes take years to implement or are never implemented.


Specifically for blazor components the minimum one expects is that they have the basic functionalities that their components have or to what we are used to, for example:


Online editing, export to Excel, I can't imagine a PivotGrid without drill down.


When you ask when these characteristics will be, the answer is always we don't know and we can't give you any date ... can you imagine us responding in the same way to our clients?


Greetings and I am a fan of DevExpress but their response times make us look to other components

4 November 2020
Konstantin Balashov
Konstantin Balashov
What about keyboard navigation?
4 November 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Jacek,

Yes, it's part of our plans to add Inline Edit mode for the DevExpress Blazor DataGrid in a future release. Please keep an eye on this blog for updates and thank you for choosing DevExpress UI for Blazor.

4 November 2020
Jaime Alvarez [VOLUNDAT]
Jaime Alvarez
Batch editing is missing
4 November 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Jamie,

Yes, batch editing is also planned for the DevExpress Blazor Data Grid. Could you please email me at mharry@devexpress.com? I'd like to discuss your concerns directly with you.

4 November 2020
Anurag Mahato
Anurag Mahato

Here is my Requirement:

GridControl

  1. Keyboard Navigation Support
  2. Move Next From Enter Key
  3. Inline Edit Mode
  4. NewItem Row Position To Top And Bottom (TOP is Priority)
  5. Print & Print Preview (Support for Customize Header And footer of page)
  6. Export (Support for Customize Header And footer of page)
  7. Support for Unbound Column
  8. Support for Band
  9. Display criteria icon in AutoFilter Row
  10. SmartExcel Filter Option Like WPF
  11. Support for Group Footer
  12. Summary Item Align by Column In GroupRow
  13. Add in Summary Type (Custom & Distinct Count)
  14. Merge Grouping like WPF
  15. Support For Conditional Formatting
  16. Support for Incremental Search
  17. Support for freeze group row while scrolling like WPF
ALL Editor
  1. Keyboard Navigation Support
  2. Move Next From Enter Key
  3. Support for Mask

New Control

  1. Menu Bar control
  2. Accordion control
  3. Wrap Panel

4 November 2020
Anurag Mahato
Anurag Mahato
There is mistake in No 4 of Gridcontrol. NewItemRow Position Bottom is Priority for Me.
4 November 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Anurag,

Thanks, we'll review and consider your requirements as we develop and finalize our upcoming Blazor roadmap.

4 November 2020
Andrew Macdonald
Peter Thorpe 2

Great progress i'm looking forward to using Blazor components when the feature set is a bit more complete.

I note 20.2 doesn't seem to have much of an update around the Pivot Grid I hope this will be getting a big update next release to cover end user customization.

5 November 2020
Stephen J White
Stephen J White

@Harry 

One of the controls we could use for Blazor is a file manager, like the one you have for the ASP.NET MVC Core (see https://demos.devexpress.com/ASPNetCore/Demo/FileManager/Overview/  ).


We don't have an immediate need for it, but we anticipate the project will start within the next two years. Do you have any plans to implement one for Blazor in the next 1-2 years? 


Aside from that, glad to see you guys are continuing forward with Blazor. We're definitely going to be using the controls at some point (as alluded to up above), so we're glad we can continue to depend on you for our component needs. 

5 November 2020
Matt Beckius
Matt Beckius

I have been using DevExpress products for over 20 years now, and I want to use your Blazor components to port a large application It would be a natural fit, because the product makes extensive use of your Winforms components, as well as the MVC components.

I have been anxiously following the development of your Blazor components from the start.  With each release you are making progress, but it seems that you are not keeping up with the competition.  I hope that how that you see that Blazor is here to stay, that you accelerate the development of your Blazor products.


Kind Regards,


Matt B.

9 November 2020
Neil C Harrington
Neil C Harrington
I agree with Jamie and Matt, your blazor components are way behind other providers out there, hope that changes soon.
10 November 2020
Kalem Yazılım
Kalem Yazılım
And unfortunately I agree Neil C Harrington :(
11 November 2020
CRM-19166cde-bcb4-4479-8e8b-13f6be8ed701
Vincent Luke

I feel that Blazor is not getting the love it needs !!! Time to cull Delphi support and move with the times and use Blazor!!


A complete sidebar with submenu's would be and instant hit!!

14 November 2020
CRM-af37b6eb-e5b7-4079-b62e-e3a9ae8d8104
Customer175842
I will also say honestly and frankly, now the components are much weaker than I expected. In the same grid I would like to see:
1) Ability to use Annotation attributes (Desription,DisplayName), both in the header and in the values. They even ignored my ToString in a complex field and made me write the full name of the desired sub-property..
It may even be worth making a separate type of column for enum-s (this would be IMHO convenient for many, and not to use combos and wrappers, make your own heirs, etc.).
2) Bands, Bands, Bands..
3) Search Field ('Filter by text' in XAF)
4) Filter (not as a row, but by buttons in column headers)
5) Context menu.
 At the moment, there is a feeling that more has been done in the xaf demo than in the components used by XAF, which is depressing
     
17 November 2020

Please login or register to post comments.