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

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


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'>
    Caption='Cloud Cover'

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.



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.


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


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

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.