Blazor Components - Data Grid Column Enhancements, Modal Toolbar Items, & New Data Editor features (v20.1.5)

ASP.NET Team Blog
24 July 2020

This post summarizes recent enhancements made to DevExpress UI for Blazor (v20.1.5).

.NET Core 3.1.5 Support

v20.1.5 supports the most recent version of .NET Core 3.1.5 update that contains security and reliability fixes.

Data Grid Enhancements

Filter Row

This release introduces a new property for our Blazor Grid columns: AllowFilter. Use this property to display/hide a corresponding column's filter editor:

<DxDataGridColumn ... AllowFilter="false">

The DevExpress Blazor Grid now hides its Filter Row by default. Enable the ShowFilterRow option to make it visible:

<DxDataGrid ... ShowFilterRow="true" >
To learn more, please review this ShowFilterRow document.

Documentation

ComboBox Column

Our Blazor Grid's ComboBox column now includes 'StartsWith' and 'Contains' filter modes. When filtering is enabled, the drop-down list is automatically filtered when an end user enters values within it.

<DxDataGrid DataAsync='@ForecastService.GetForecastAsync' ShowFilterRow='true'>
  <DxDataGridComboBoxColumn
    Field='@nameof(WeatherForecast.CloudCover)'
    Caption='Cloud Cover'
    FilteringMode='DataGridFilteringMode.Contains'
  />
</DxDataGrid>

The ComboBox column can load visible items within its drop down list (loads data virtually and on demand). This improves performance when binding to a large dataset.

Set the ListRenderMode property to one of the following options:

  • Entire - The editor renders the entire list simultaneously. Use this mode for short lists - when rendering the entire list does not slow performance.
  • Virtual - The editor renders list items when they appear in the viewport. Use this mode to optimize rendering speed for large lists.

Documentation

Navigation

Toolbar - Adaptivity Enhancement

For those targeting mobile devices, we've added a popup and modal mode for the Toolbar's drop down window. These modes mimic the behavior of a standard drop down control on mobile browsers.

Blazor-toolbar-modal-mobile-mode

Use the DropDownDisplayMode property to specify display mode for all menus within the toolbar. When the property is set to Auto, the menus adapts itself for a given device.

Demo | Documentation

Editors

Drop-Down Width Mode

You can control how our Blazor ComboBox and TagBox components display associated drop-down windows. Use the DropDownWidthMode property to specify the width of the drop-down list. The following values are available:

  • ContentOrEditorWidth (default) - minimum drop-down width matches the editor. Drop-down width is increased to fully display list item text (as needed).
  • ContentWidth - drop-down width equals the width of the longest list item.
  • EditorWidth - drop-down width matches editor width. List items are truncated if they do not fit.

ComboBox Demo | TagBox Demo

Min/Max Dates

Our date picker/data selection editors, Calendar and Date Edit, now allow you to set the date range available for selection. Assign the required dates to the component’s MinDate and MaxDate properties.

DevExpress Blazor-dateedit-calendar-min-max-date-range-limition

Calendar Demo | Date Edit Demo

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
7 comment(s)
Rick Mathers
Rick Mathers
The toolbar adaptivity is really nice.  Thank you for the Min/Max dates as well.  Something I would really like to see is the date range capability within a single control (Like the ASP MVC Control)
24 July 2020
Istvan Kardkovacs
Istvan Kardkovacs

Hi Mehul,

Could you please create a VS template for Devexpress Blazor components?

IT would be great to have a template with Devexpress Blazor components with the theme selector and with similar functionalities (WeatherForecast) what the current Blazor template has.

Thanks.

26 July 2020
CRM-97ead079-3b52-4563-8c7a-c3c4cdeef546
Ashish Moradiya AN
Thumbs up for Istavan's suggestion. I am also looking forward for blazor template with Header and sidebar navigation provided by devexpress.
27 July 2020
Customer49025
Jay15614981

Hi Mehul,

Currently there is no timepicker. Is this something that is on the roadmap and when would it be available?

Thanks.

28 July 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Jay15614981,

Yes, it's planned for later this year:

Time Section in Data Edit

The Date Edit component will incorporate a time edit section and allow end-users to set time values alongside dates.

 

Read the full Roadmap 2020 (Mid-Year Update)

28 July 2020
Onno Boomstra
Onno Boomstra

I've read in a previous post something about a FileManager component for Blazor being scheduled ... Any updates on the release date for this?

Thanks!

O.

28 July 2020
Jacek Kosiński
Jacek Kosiński
Do you have plans to inline/batch edit in data grid?
2 August 2020

Please login or register to post comments.