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

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" >

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.

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.

Calendar Demo | Date Edit Demo