DevExpress ASP.NET and Blazor 24.2

Released: Dec 12, 2024

Updates in 24.2

Funktionen

Blazor

New Fluent Theme (CTP)

  • All DevExpress Blazor component libraries support the new Microsoft Fluent 2-inspired UI theme (available as a Community Technology Preview in the v24.2 release cycle). This modern Blazor UI theme aligns visually with Microsoft Office products and offers important usability/accessibility-related benefits.
  • New Blazor Fluent Theme
    • While the Fluent theme draws inspiration from Microsoft's Fluent Design System, it was designed with data-intensive/information-dense applications in mind. With this new theme, you can create compact data tables that maximize on-screen information display and page layouts that are visually approachable.
  • Light and Dark Modes
    • The Fluent theme is available in two distinct variants: Light and Dark. Both versions have been designed with accessibility in mind (featuring carefully designed color contrasts to meet WCAG guidelines). To simplify customization, colors and other appearance settings are now structured and stored in CSS variables shared across component libraries.
  • Size Modes
    • Much like standard DevExpress Blazor themes, the new Fluent theme offers three size modes - Small, Medium, and Large. All Fluent theme size modes have been refined for additional flexibility.
  • Fluent Icons
    • The DevExpress Fluent theme ships with built-in line icons for many of the Blazor component libraries. These icons integrate with Fluent UI System icons and Fluent icons from DevExtreme. An extended Fluent icon set will be published in the future, offering even more options for design customization.

AI-powered Extensions

  • New AI Chat
    • The new DevExpress Blazor AI Chat Component allows you to incorporate AI-driven interactions into your application.
  • HTML Editor & Rich Text Editor - AI-powered Text Commands
    • DevExpress AI-powered Extensions for the Blazor HTML Editor and Rich Text Editor allow you incorporate AI-related commands to component toolbars. Commands are designed to process text/HTML content.

New Pivot Table (CTP)

  • The new Blazor Pivot Table UI component was designed to replace the current Pivot Grid. This new Blazor Pivot Table component (available as a Community Technology Preview - CTP) leverages the DevExpress data engine (used across other .NET platforms) and is expected to officially ship in 2025.

New Buttons

  • The new DevExpress Blazor DxDropDownButton, DxSplitButton, and DxButtonGroup UI components were designed to extend the capabilities of your DevExpress-powered Blazor app and address a variety of usage scenarios. 
    • DropDown Button and Split Button - The Blazor Drop-Down Button and Split Button components combine the functionality of a button and a drop-down.
    • Button Group - The Blazor Button Group component displays a set of buttons.

New Carousel

  • The new DevExpress Blazor Carousel displays an image collection using a carousel UI metaphor. It includes multiple navigation controls and allows users to easily switch images.

New Color Palette

  • The Blazor Color Palette component allows users to select a color from a predefined set. It ships with the support for multiple color groups and a built-in No Color button.

New Message Box

  • The Blazor Message Box component allows you to display alerts or confirmation dialogs (similar to those in JavaScript), without the need for custom Razor code.

New Range Selector

  • The new DevExpress Blazor Range Selector allows you to visualize data within its scale. Users can select a range by dragging sliders or using the mouse to select an area on the scale. This control can augment the Blazor Chart library, enhancing data filtering and visual range setting experiences.

New Ribbon (CTP)

  • The new Blazor Ribbon UI component leverages a tabbed toolbar UI metaphor to organize command items across different tabs. This component simplifies access to various functions, enhancing both organization and overall user experience. Key Features include:
    • Application Button: Like the Microsoft Office Ribbon, DevExpress includes an Application Button, providing quick access to common functions in a dropdown.
    • Support for Multiple Built-in Editors: The Ribbon supports various editor types, such as buttons, text boxes, combo boxes, color pickers, and spin editors. This improves code structure and efficiency.
    • Advanced Adaptivity: The Ribbon features flexible adaptivity. Each group has its own ellipsis button and can collapse into a compressed state.
    • Contextual Tabs: The Ribbon includes contextual tabs that appear dynamically based on the user's actions or selection. These tabs display relevant commands and tools tailored to the current task or content, enhancing user experience and streamlining workflow.
  • Adaptivity includes several tiers, such as:
    • Item Text Removal: Text is removed from items right to left (or based on priority settings).
    • Local Ellipsis: Items within a group collapse individually, preserving the group structure. Group icons are customizable to suit application requirements.
    • Global Ellipsis: Entire groups and their items can collapse under a global button.

New Sankey

  • The DevExpress Blazor Sankey helps you describe flow magnitude between value sets. You can use Sankeys to display a many-to-many mapping between two domains or multiple paths through a set of stages (e.g., how Google Analytics displays traffic flow between pages on your website).

New Search Box

  • The DevExpress Blazor Search Box allows you to incorporate a search UI/search functions to your DevExpress-powered Blazor app. The Search Box integrates well with other DevExpress Blazor components.

New Splitter

  • The DevExpress Blazor Splitter allows you to separate web page content into multiple resizable panes. The component supports nested splitter components, allowing you to create complex layouts with ease.

Script Loading

  • DevExpress reworked the script loading engine and refactored the scripts used by DevExpress Blazor components to improve component loading speed and reduce the size of script files. Depending on the number of components used, your apps will now download up to 11 MB less of JS files on initial load.

Keyboard Support

  • To address accessibility standards and improve user experiences for those with disabilities, v24.2 adds keyboard navigation support for the following Blazor UI components:
    • Date Range Picker.
    • Form Layout.
    • Scheduler.
    • Tabs.
    • TreeList.
    • Window.

Validation State Visibility

  • DevExpress Blazor Data Editors, Grid, and TreeList no longer display "success" icons or green outlines if user input is valid. This change was made to maintain UI consistency and avoid unnecessary distractions for end-users. You can enable success state for individual components or the entire app using the new ShowValidationSuccessState option.

Grid & TreeList

  • Row-based Drag & Drop Operations
    • Both the Blazor Grid and TreeList components now support row-based drag & drop operations. Users can reorder rows and/or move rows from one table/component to another. Users can also modify Blazor TreeList node hierarchies.
  • New Item Row
    • The DevExpress Blazor Grid and TreeList allow you to insert rows/records via the New Item Row - an empty row displayed above or below data records.

TreeList

  • Official Release
    • The Blazor TreeList is now ready for production use. DevExpress finalized its APIs/behaviors and implemented the following new features and enhancements.
  • Editing
    • The DevExpress Blazor TreeList now supports the following edit modes:
      • Edit Form/Popup Edit Form.
      • Edit Row.
      • Edit Cell.
  • Column Filter Menu
    • The Blazor TreeList now features Excel-inspired filter dropdowns. These menus display all unique column values and include a search box and a Select All option.
  • New Filter Mode - Nodes
    • When using the Nodes filter mode, the DevExpress Blazor TreeList displays all nodes that meet current filter criteria as a plain list. This improves TreeList performance when it is bound to a large remote dataset and is useful when finding specific records is more important than keeping the node hierarchy visible.
  • Export Data to Excel
    • The DevExpress Blazor TreeList can now export data to Excel. With the new APIs, you can save data to XLS, XLSX, and CSV, or stream.
  • Save/Restore Layout
    • You can now save and restore the Blazor TreeList layout. Layout information includes the current page, column sort order/direction, column position, and filter values.
  • Self-Reference Data Binding Enhancements
    • The Blazor TreeList can now automatically detect root nodes - nodes whose ParentID values don't point to other nodes in the source collection. For more precise control, TreeList also exposes a RootValue property. If this property is specified, the TreeList treats all nodes with ParentID values equal to RootValue as root nodes.
  • Expand All Nodes Automatically
    • The new AutoExpandAllNodes property expands all nodes when TreeList data is loaded for the first time.
  • Expansion State Persistence
    • The Blazor TreeList can now retain node expansion state for in-memory sources. Whenever you call the Reload method or reassign the data source collection, it will automatically find the IDs of previously nodes and restore their original expansion state.
  • Shortcuts and Keyboard Support Enhancements
    • Use the following new shortcuts to expand/collapse rows in the Blazor TreeList:
      • PC/Windows - Ctrl+Right Arrow/Ctrl+Left Arrow.
      • Mac/macOS - Cmd+Right Arrow/Cmd+Left Arrow.

Charts

  • SSR Support
    • DevExpress Blazor Chart components ship with an updated internal DOM hierarchy and now support SSR. This allows you to visualize chart data without additional project configuration in .NET 8. When using Interactive Auto render mode, you can use SSR for initial chart rendering and CSR once the Blazor bundle has been downloaded.
  • Crosshair Support
    • The new Blazor ChartCrosshair object allows you to display and configure crosshairs - thin vertical and horizontal lines centered on a data point within a chart.
  • Aggregation Interval Settings
    • You can now aggregate series points that fall within the same interval.
  • Selection API
    • DevExpress Blazor Chart components now allow you to select series and points programmatically as well as clear selections.

Data Editors

  • List Editors - Group Data
    • DevExpress Blazor list-based data editors (ComboBox, TagBox, and List Box) allow you to organize data items into groups. Groups make lists more readable and help users locate required options more quickly. Groups are not selectable and can't be focused with the keyboard. However, screen reader tools will read the group name for a focused item.
  • List Editors - Disabled Items
    • The list-based editors (ComboBox, TagBox, and List Box) allow you to disable individual data items. To do this, use the new DisabledFieldName property. Disabled items are greyed out and cannot be selected by end-users. However, it is still possible to select a disabled item in code and disable a previously selected item.
  • ListBox - Search
    • The DevExpress Blazor List Box now includes a built-in search box that allows users to filter items and highlight search results. To enable the search box, set the ShowSearchBox property to true.
  • Disable Validation
    • DevExpress Blazor editors automatically display validation errors from bound properties when placed inside EditForm. You can now disable this option for individual editors by setting the ValidationEnabled property to false. This is useful when an error needs to be displayed elsewhere or is not relevant to the user.

Map

  • Advanced Google Markers and Map ID Support
    • DevExpress Blazor Map component APIs now include a GoogleMapId property for both Google and GoogleStatic map providers. Assign a map ID to the GoogleMapId property to apply a specific predefined map style or feature.

PDF Viewer

  • Official Release
    • The Blazor PDF Viewer is now ready for production use. DevExpress have tested it across various usage scenarios and made internal changes to improve overall stability.

Rich Text Editor

  • Download Document Enhancements
    • The DevExpress Blazor Rich Text Editor allows you to set a custom name for a document downloaded using the component's Download Menu. To customize the name of the downloaded document, specify the DocumentName property in the Editor's markup.
  • Horizontal Ruler Visibility
    • The Rich Text Editor's new HorizontalRulerVisible property allows you to change horizontal ruler visibility in code. To respond to the property change, handle the HorizontalRulerVisibleChanged event.
  • IF Field Support
    • The DevExpress Rich Text Editor now supports the IF field and allows you to compare two values and insert a text string related to the comparison.
  • BeginTransaction and EndTransaction
    • In previous versions, the Blazor Rich Text Editor sent data from the server to the client with each individual change made to a document. For complex document structures and/or significant network latency, this could impact the editor's overall performance. To address this limitation, DevExpress added BeginTransaction and EndTransaction methods to the UI library. These methods allow you to accumulate multiple changes on the server and send them to the client in a single transaction.

Scheduler

  • Selected Date Formatting
    • The new DateNavigatorTextTemplate property allows you to customize how the Scheduler's Date Navigator displays a selected date or a date range.

Tabs

  • Close Tab Button
    • Enable the AllowClose property to let users close the tab.
  • Tab Reorder
    • Use the AllowTabReorder property to reorder tabs by dragging them to a desired position. Once a user drops a tab to a new position, the component raises the TabReordering event.

TreeView

  • Performance Enhancements
    • DevExpress made changes to the Rendering engine (used in the Navigation suite), resulting in a notable reduction of load time - especially in the TreeView component.

Security

  • Environment Policy
    • This release added a new Environment Policy that allows you to apply global environment access restrictions, track app-initiated requests (initiated by a DevExpress UI control) and execute custom actions in response.
    • You can apply global restrictions using various methods like SuppressAll to block all environment access or more specific options such as preventing DevExpress UI controls from reading or writing environment variables, exiting processes, altering the current directory, or reading paths to system special folders.
    • Event handlers allow you to track and manage environment operations. For example, you can detect when DevExpress UI controls attempt to read or modify environment variables, process data, or system directories and enable conditional responses based on specific conditions.
  • Registry Access Policy
    • DevExpress UI controls can save, read, and modify configuration settings and options in the system registry. These requests can be initiated in code or through the internal control engine. The Registry Access Policy allows you to apply global registry access restrictions, track user/app-initiated requests, and execute custom actions in response.
  • Microsoft's BinaryFormatter Obsoletion Strategy
    • As outlined in Microsoft's BinaryFormatter Obsoletion Strategy, the final removal of BinaryFormatter-related infrastructure is planned for Microsoft .NET 9. DevExpress have proactively addressed these changes, ensuring the codebase is compliant and secure while minimizing migration impact for DevExpress customers.

Accessibility (A11Y)

  • In v24.2, DevExpress expanded accessibility support to include more UI controls and platforms:
    • Blazor UI Components.
    • Reporting.
    • DevExtreme Components.

.NET 9 Support

  • DevExpress Blazor libraries now support .NET 9.

 Supported IDEs & Frameworks

  • .NET 8, .NET Framework 4.6.2, Visual Studio 2019 are minimally supported versions for DevExpress .NET Core and .NET Framework-based products and libraries (v24.2+).

Upgrade to .NET from .NET Framework

  • The Project Converter can now convert DevExpress assembly references in your solution or specific projects to corresponding DevExpress NuGet packages. By selecting the "Convert DevExpress assembly references to NuGet packages" option under Advanced settings, you can easily transition to NuGet-based project management.

New Project Template Gallery for .NET 8+

  • The Microsoft Visual Studio Template Gallery includes new project templates for .NET 8+ (not available for projects targeting .NET Framework). The Template Gallery allows you to create projects that target .NET 8 (the default target in v24.2) or .NET Framework 4.6.2 (or higher).
  • v24.2 includes the new cross-IDE Template Kit for .NET (available as a Community Technology Preview). This new gallery is built atop the dotnet CLI and is available across multiple IDEs. This extension is available for Microsoft Visual Studio 2022 and Visual Studio Code (VS Code) on Microsoft Windows, with plans to expand support to Rider for Windows and additional operating systems in the future.
  • New project templates cover a broader range of usage scenarios when compared to the previous Template Gallery for .NET Framework (shipped as part of the Unified Component Installer). New project templates support hybrid app development and new technologies such as Blazor Hybrid, .NET MAUI, and MVVM.

Source Builder

  • .NET Core Support and Usability Enhancements
    • The new Source Builder ships as part of the DevExpress Unified Component Installer. The tool rebuilds the source code used for .NET Core product libraries (previously it only supported .NET Framework).

Azure Maps Support

  • DevExpress have added Azure Maps service support for the following controls:
    • DevExtreme Maps.

Artificial Intelligence (AI) v24.2

  • AI-powered Extensions
    • You can now integrate multiple pre-built natural language (NLP) UI elements into your next DevExpress-powered Blazor app. With the lightweight APIs (AI-powered Extensions), your solutions can interact with multiple AI services, including OpenAI, Azure OpenAI, self-hosted models (Ollama) and any other AI services that you can consume via the Semantic Kernel. DevExpress AI-powered Extensions ship with the following features/capabilities:
      • AI-powered Document Editing - Summarization, proofreading, changing tone/writing style, translation, expansion/shortening, and much more, with automatic content chunking for large text blocks.
      • Blazor AI Chat - The new DevExpress Blazor AI Chat Component (DxAIChat) for building Copilot-inspired user interfaces in Blazor, and WinForms, WPF, and .NET MAUI apps via BlazorWebView.
      • DevExtreme Chat - The new DevExtreme UI Chat Component can be integrated with multiple AI services. Use it to incorporate natural language processing, automated responses, sentiment analysis, personalized recommendations, and real-time data analysis in Web applications (ASP.NET, Angular, React, Vue).
      • Smart Autocomplete - Context-based predictions and relevant text suggestions for sentence completion.
      • Retrieval-Augmented Generation (RAG) capabilities - For example, "chat with your own data" via OpenAI Assistants support.