DevExpress ASP.NET and Blazor 22.2

ASP.NET Core Controls

Microsoft .NET 7 Support

• Added full support the latest build of .NET 7.

.NET 6 Support

• .NET 6 is now the minimum supported framework version - This release requires .NET 6 and Microsoft Visual Studio 2022 (v17.0) or higher.

Charting

• Range Bar Chart - Minimum Bar Size - You can now use the new minBarSize property to specify minimum size for bars displayed in the Range Bar Charts.
• Data Visualization Components - Adapt to Container Resize - The Chart, Gauge, and Map controls now automatically adapt to changes in container.
• VectorMap - Control Panel Customization - The following options allow you to display/hide the Pan Control and Zoom Bar: panVisible and zoomVisible.

Pivot Grid

• Export Field Panel Headers to Microsoft Excel - You can now include field panel headers in an exported worksheet. The following field header export-related options are now available:
  • exportColumnFieldHeaders.
  • exportDataFieldHeaders.
  • exportFilterFieldHeaders.
  • exportRowFieldHeaders.
• Field Chooser - Encode HTML - Added new encodeHtml property which allows you to process HTML tags as plain text or apply them to header filter values.

UI Components

• CSS Styles Enchancements - The following components are now rendered more consistently under different use-case conditions (applies to both the Generic and Material themes):
  • Button.
  • Calendar.
  • Toolbar.
  • DateBox.
  • Scheduler.
  • FieldSet.
  • List.
• Validation Message Position - Added new validationMessagePosition option which specifies the position of a validation message relative to the editor's input region. Available settings include: 'bottom' (default), 'top', 'left', and 'right'.
• Show/Hide API Enhancements - The cancel parameter for onShowing/onHiding events now supports the Promise type. This allows you to execute asynchronous actions before components are displayed/hidden. This enhancement is available in the following UI components:
  • Popup.
  • Popover.
  • Tooltip.
  • Toast.
  • LoadPanel.
  • The show/hide methods now return a Promise object, which is resolved once the operation is complete. This Promise is rejected if the operation was cancelled.
• Slider & Range Slider - Value Change Mode - The Slider and Range Slider components now include a valueChangeMode option. This option specifies when a slider's value is changed. Available modes include:
  • The value changes when the user releases the slider handle.
  • The value changes immediately whenever the user moves the slider handle.
• Toolbar Adaptability - Multiline Mode - The Toolbar can now wrap across multiple lines when it is wider than its container. Use the multiline property to enable multiline mode.
• Accordion - Title Templates for Individual Items - You can now define title templates for individual items. Use the titleTemplate property as requirements dictate.
• CheckBox - Cycle Through Three State - Extended the functionality of the CheckBox component. Users can now toggle between all three states by clicking a box (cycling from unchecked to checked and then to an indeterminate state). Use the enableThreeStateBehavior option to enable this mode.
• Calendar - Week Numbers - The Calendar component can now display week numbers. Use the showWeekNumbers property to enable this option. The Calendar automatically sets the first week of the year based on culture (locale). The weekNumberRule property has been added to specify the rule used to determine the first week of the year. Available rules include auto, first day, first four days, and full week.
• SelectBox and TagBox - Submit Custom Items on Loss of Focus - Enhanced the default behavior of the SelectBox and TagBox components. These components create custom items when the user presses the Enter key or when the component loses focus. And you can assign a DOM event to the customItemCreateEvent property to change the default behavior as needed.
• Form - Custom Label Template - Form labels can now display images and support content formatting. Use the label.template property to define a custom template.
• Popup and Popover - Overflow Menu in Toolbar - Toolbars within the Popup and Popover components can now display an overflow menu. Use the following API to customize the menu and toolbar items:
  • cssClass.
  • locateInMenu.
  • menuItemTemplate.
  • showText.
• DateBox - Customize Today Button Text - You can now rename the Today button (which appears in 'date' and 'datetime' modes). The new todayButtonText property specifies the text for the button.

Microsoft Visual Studio 2012/2013 Deprecation

• Support for Visual Studio 2012 and 2013 has been deprecated. The demo apps now target Microsoft .NET Framework 4.7.2 (.NET Framework 4.7.2 targeting pack is available in Visual Studio 2017, 2019, and 2022). Demo app changes do not affect .NET Framework customers in any manner - the product assemblies will continue to target .NET Framework 4.5.2 in this release cycle.

Installation & NuGet

• The Unified Component Installer now includes an option to install localized resources for certain languages (DE, ES, JA). These resources will not be installed by default - you can install them at your discretion. Note: localized resources may be incomplete. Navigate to Localization Service to download community sourced localization for other languages.

Blazor UI Components

Microsoft .NET 7 Support

• Added full support for .NET 7. The DevExpress Template Gallery now includes Blazor project templates for .NET 7.

Ahead-of-Time (AOT) Compilation Support

• DevExpress-powered Blazor WebAssembly apps now support ahead-of-time (AOT) compilation. You can compile your .NET code directly to WebAssembly.
  • Note: AOT compilation improves runtime performance, but it does increase application size.

Blazor Hybrid Support

• You can now use DevExpress Blazor UI components in Blazor Hybrid apps. With Blazor Hybrid, Razor components run natively on both mobile and desktop devices. This improves performance and provides access to native device capabilities through the .NET platform. DevExpress Blazor components support the following platforms with Blazor Hybrid:
  • Microsoft .NET MAUI (Microsoft Windows, Apple macOS, Android).
  • WinForms.
  • WPF.

Bootstrap v5.2 Support

• DevExpress Blazor components now fully support the latest release of Bootstrap v5.2. Set the BootstrapVersion option to v5 to ensure that your app works correctly.

New Render and Size Modes

• The DevExpress Blazor Data Grid (DxGrid), Editors, Layout, and Navigation components now use DevExpress's optimized rendering engine instead of Bootstrap. This change will allow the Blazor component suite to be extended with the following new capabilities/features:
  • Improved rendering performance with fewer JavaScript interop calls.
  • Consistent appearance across DevExpress Blazor components.
• The new rendering engine significantly improves the capabilities of existing Blazor Size Modes:
  • Blazor components (regardless of size mode used) are downsized to address the requirements of "dense" interfaces and display more relevant information on screen. The new Large Size Mode mirrors what used to be “Medium.” The new Medium mode is closer to what used to be “Small.” And the new Small mode allows you to deliver interfaces similar to desktop apps such as Microsoft Outlook.
  • New size modes apply to the Blazor Data Grid (DxGrid), Tabs, Flyout, and other UI components that previously did not support the size mode option.
  • Size modes now offer a more consistent user experience and affect all spacings/sizes across supported Blazor components.

New Window Component

• Added a new Window component which is a non-modal window. Its features include:
  • Move & Resize.
  • Header Customization.
  • Show/Hide Close Button.
  • Window Positioning (at a specified position or UI element).
  • Keyboard Support.
  • Comprehensive API.

Data Grid

• Export Data to Microsoft Excel - The Blazor Data Grid can now export data to Excel. With this new API, you can save your data to XLS, XLSX, and CSV files (or stream). Data export operations support grouping, sorting, filtering, totals, and group summaries. New API includes:
  • ExportToXlsAsync.
  • ExportToXlsxAsync.
  • ExportToCsvAsync.
  • All methods accept the 'options' parameter. This parameter allows you to customize the exported document.
• Search Box - The Blazor Data Grid component now includes a progressive case-insensitive search option (allows you to locate matched text as you type). When you type within the search box, the Data Grid filters data rows, displays those that match the search string, and highlights search results. Additional features include:
  • Support for special characters.
  • Configurable input delay.
  • Search box placeholder (null text) support.
  • Ability to exclude specific columns from search operations.
  • Built-in search text parse modes.
  • Ability to specify search text in code (Search API).
  • You can also customize search box appearance settings, render the search box from a template, or use an external editor.
• Integrated Editor Appearance - DevExpress Data Editors embedded into cells now share the same border with the cell itself.
• Focused Row - The Blazor Grid now supports row focus.
  • Users can focus a row with the mouse. Set the FocusedRowEnabled property to 'true' to enable this feature.
  • The SetFocusedDataItemAsync and SetFocusedRowIndex methods allow you to focus a row in code.
  • The Data Grid fires the FocusedRowChanged event after the focused row has changed.
• Select All - Added new SelectAllCheckboxMode property which specifies the behavior of the Select All check box. Available options include:
  • Page - Selects/deselects all rows on the current page.
  • AllPages - Selects/deselects all rows across all pages.
  • Mixed - Selects/deselects all rows on the current page. A drop-down button opens a context menu and allows users to select and deselect all rows across all grid pages.
  • New API includes:
    • SelectAllAsync - Selects all rows in the grid.
    • DeselectAllAsync - Deselects all rows in the grid.
• Filter by Display Text - Added new DxGridDataColumn.FilterMode property which specifies how to filter column data. Available options include:
  • DisplayText - Filters data against text displayed within cells.
  • Value - Filter data against cell values.
• Filter Expression API - Added new API which allows you to filter data in code and implement an external filtering UI tailored to specific usage scenarios:
  • GetFilterCriteria - Gets the filter criteria applied to the grid.
  • GetFieldFilterCriteria - Gets the filter criteria applied to a specified field.
  • SetFilterCriteria - Filters grid data against specified criteria.
  • SetFieldFilterCriteria - Filters specified field values. The Data Grid combines column filters with the AND operator.
  • FilterCriteriaChanged - Fires after the filter criterion is changed.
• Fixed and Relative Height - You can now explicitly set the height of the Blazor Grid or set the height as a percentage of the height of the container/viewport. The footer element will remain at the bottom regardless of the rows displayed within the Grid.

Accordion

• Item Selection - The Blazor Accordion component now supports item selection. Set the SelectionMode property to Single to enable this capability. Users can click an item header to select the item. The SelectItem method allows you to select an item in code.
• URL-match Mode - The Accordion component can now automatically select an item if its NavigateUrl property value points to the current URL (which is displayed in the web-browser's address bar). Available modes include Current Path, Prefix, and Exact. Two new properties allow you to specify how the Accordion component matches URLs:
  • DxAccordion.UrlMatchMode - Specifies URL-matching mode used for all items.
  • DxAccordionItem.UrlMatchMode - Specifies URL-matching mode used for a specific item.
  • You can also use the Reason property to identify why selection was changed.
• Expand and Collapse Animation - You can now play the slide animation effect when expanding/collapsing Accordion items.

Data Editors

• Added new Mask Types:
  • Date-Time Offset - Allows a user to enter only date and time values, and stores the time's offset from Coordinated Universal Time (UTC) in the editor's value. You can apply this mask to the DxDateEdit and DxMaskedInput components. The DxDateTimeOffsetMaskProperties class allows you to customize the mask settings.
  • Time Span - Allows users to enter only time intervals in DxMaskedInput. Use the DxTimeSpanMaskProperties class to configure the mask.
• Validation Icons - Data editors can now display meaningful validation icons (Error or Success) and text-based feedback (tooltips). You can enable validation icons for all editors in your app or specify icon visibility for each editor individually.
• Delayed Input - The data editors with text input fields (e.g., DxMaskedInput, DxMemo, DxTextBox, DxSpinEdit) can now update associated values with a delay. Enable this option if you wish to reduce value updates (reducing updates improves client-side performance). A new BindValueMode property has also been added. Set it to 'OnDelayedInput' to enable delayed input. You can also use the InputDelay property to specify the delay period.
• Focus First Match - The Blazor ComboBox component now automatically highlights the first match after a filter operation. This feature allows users to select values via the keyword.

Form Layout

• Collapsible Groups - Users can now expand/collapse layout groups. You can use the Expanded property to expand or collapse a group in code. The new ExpandButtonDisplayMode property allows you to position the expand button within a group header. You can display the expand button to the left or right of the group caption, hide the expand button, or customize its appearance. You can also play the slide animation effect when expanding/collapsing Form Layout groups.
• New Templates and Customization API - The Form Layout component now includes new customization options for tab pages and layout groups.
  • Tab Page API:
    • CaptionTemplate.
    • HeaderTemplate.
    • HeaderIconCssClass.
  • Layout Group API:
    • CaptionTemplate.
    • HeaderContentTemplate.
    • HeaderIconCssClass.
  • You can also specify the ColSpanXxl property to define the number of columns a layout item, group, or tab page spans across large screens (1400px or wider).

Menu

• API Enhancements:
  • IMenuItemInfo.Parent - Gets the item's parent.
  • DxMenu.Target and DxMenuItem.Target - Specifies the target attribute for all menu items or a specific item.

Reporting

• New Report Viewer & Designer for WebAssembly (ASP.NET Core Hosted) - The new DxWasmDocumentViewer and DxWasmReportDesigner WASM components are aimed at minimizing integration efforts and reducing support inquiries. These components ship as part of the DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly Nuget package.
• Native Report Viewer - Parameters Panel Layout - The Report Viewer component (DxReportViewer) can now render the Parameters panel with a custom layout.
• New Project Templates - The DevExpress Blazor App Template Gallery for Microsoft Visual Studio now includes Reporting templates. Use these templates to jump start the BI application development (be it a Server or WebAssembly Hosted app) process. Reporting templates allow you to create an application that includes the following:
  • Report Designer.
  • Report Viewer (JS-based).
  • Report Viewer (Native).
  • Report Storage.
  • Sample SQL Connection, JSON/Object Data Source.
  • In the CLI, the new templates are available as:
    • dx.blazor.reporting.blazorserver.
    • dx.blazor.reporting.webassembly.

Rich Text Editor

• WebAssembly Support - The Blazor Rich Text Editor now supports the Blazor WebAssembly hosting model. This model offers the following advantages (compared to the server hosting model):
  • The application remains functional if the server goes offline.
  • The application makes full use of the client's resources and capabilities.
  • Processing has moved from the server to the client, so your application takes up fewer server resources.
  • Serverless deployment scenarios are possible.
  • In Web Assembly applications, the Rich Text Editor component provides the same functionality and behavior as that of a Blazor Server application.
• Spell Check - The Blazor Rich Text Editor now supports on-demand spell checking. It can detect spelling errors and suggest corrections. The Rich Text Editor integrates a spell check service using an English dictionary and allows you to add other dictionaries (for various languages) as needed.
• API Enhancements:
  • DxRichEdit.PrintDocumentAsync - Invokes the browser's Print dialog.
  • Document.ChangeDefaultCharacterPropertiesAsync - Changes default character formatting used in a document.
  • SubDocument.ClearFormattingAsync - Resets character formatting in the entire sub-document or in its interval to default settings.
  • DxRichEdit.ContentInserted/DxRichEdit.ContentRemoved - Fires after content was inserted/removed from the document and allows you to track changes.

Tabs

• Disabled State - Added new Enabled property which allows you to enable/disable individual tabs.
• Tab Header Template - Added new TextTemplate property which allows you to define a tab header template, which can include custom UI visuals (such as command buttons).

Toolbar

• Bind to Data - You can now bind the Blazor Toolbar component to a data source. To introduce this capability in your Blazor app, use its Data and DataMappings properties. In bound mode, the Toolbar generates items automatically.
• API Enhancements:
  • IToolbarItemInfo.Parent - Gets the item's parent.
  • DxToolbar.Target and DxToolbarItem.Target - Specifies the target attribute for all toolbar items or a specific item.

TreeView

• URL-match Mode - The Blazor TreeView component can now automatically expand a tree and select a node if its NavigateUrl property value points to the current URL, which is displayed in the web-browser's address bar. Available modes include Current Path, Prefix, and Exact. Two new properties allow you to specify how the TreeView component matches URLs:
  • DxTreeView.UrlMatchMode - Specifies URL-matching mode used for all nodes in a tree.
  • DxTreeViewNode.UrlMatchMode - Specifies URL-matching mode used for a specific node.
  • You can also use the Reason property to identify why selection was changed.
• Expand and Collapse Animation - You can now play the slide animation effect when expanding/collapsing TreeView nodes.
• Node Click Events:
  • DxTreeView.NodeClick - Fires when a user clicks a node in a TreeView.
  • DxTreeViewNode.Click - Fires when a user clicks a specific node.

Microsoft Visual Studio 2012/2013 Deprecation

• Support for Visual Studio 2012 and 2013 has been deprecated. The demo apps now target .NET Framework 4.7.2 (.NET Framework 4.7.2 targeting pack is available in Visual Studio 2017, 2019, and 2022). Demo app changes do not affect .NET Framework customers in any manner - the product assemblies will continue to target .NET Framework 4.5.2 in this release cycle.

Installation & NuGet

• The Unified Component Installer now includes an option to install localized resources for certain languages (DE, ES, JA). These resources will not be installed by default - you can install them at your discretion. Note: localized resources may be incomplete. Navigate to Localization Service to download community sourced localization for other languages.