ASP.NET Team Blog

DevExpress Blazor AI Chat — AI Assistants for Report Viewer and Grid

Dmitry Tokmachev (DevExpress) — Mon, 24 Mar 2025 10:35:00 GMT

In this post, I will detail how you can integrate our Blazor DxAIChat component in your project and provide Copilot-like AI assistants to your end-users.

First, a quick word about this implementation...by incorporating the DevExpress AI-powered Chat component and associated natural language processing services, your DevExpress-powered Blazor app can efficiently filter/analyze/summarize data, generate document insights, ask contextual questions, and obtain answers related to reports, tables, and more.

Review our GitHub Example

To help illustrate what's possible, we published a working example on GitHub. This example features the DevExpress Blazor Report Viewer and Grid control and includes a detailed README with implementation guidelines and practical usage scenarios:

Blazor Grid and Report Viewer — Incorporate an AI Assistant (Azure OpenAI) in your next DevExpress-powered Blazor app.

Expanding AI Integration to WinForms and WPF

A similar AI assistant implementation can also be applied to WinForms and WPF-powered applications (apps that support data export to Excel and/or PDF). If you are looking to introduce a Copilot-like assistant into your next great WinForms/WPF app, please refer to our Blazor DxAIChat component implementation guide in the following example:

Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application.

Share Your Feedback

We appreciate your continued support and enthusiasm for DevExpress tools. If you have any questions or would like to discuss AI-related integration needs, please submit a support ticket via the DevExpress Support Center.

Blazor — June 2025 Roadmap (v25.1)

Alex Chuev (DevExpress) — Thu, 20 Feb 2025 18:00:00 GMT

This post outlines key features/enhancements planned for our next major update (v25.1) in June 2025.

As always, if you have questions or suggestions, feel free to share your thoughts in the survey at the end of this post or submit a ticket via the DevExpress Support Center.

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This roadmap and the features/products listed within it are subject to change. You should not rely on or use this information to help make a purchase decision about Developer Express Inc products.

Live Roadmap Updates

This roadmap will be regularly updated to reflect development progress. As we get closer to the release, we expect to add more items and modify the status of planned features. Look for the following labels next to every feature:

Planned — Feature is scheduled but not yet in development.
In Development — Under active development.
Coming in EAP v25.1 — Will be available in our first v25.1 early access preview.
Coming in v25.1 — Will be included in the final v25.1 release.
Released in v25.1 — Fully implemented and available.

Legacy Data Grid, ComboBox, Tag Box, and List Box Removal

Over the past three years, we have transitioned our Blazor components from a custom-built Blazor-specific data engine to the cross-platform DevExpress.Data library. The ComboBox, Tag Box, and List Box components only saw internal changes and maintained the same API, while our Data Grid (DxDataGrid) has been replaced with the new DevExpress Blazor Grid (DxGrid). New components are more robust, utilize modern development practices, and benefit from the same powerful data engine used by our Data Grids for WinForms, Web Forms, and WPF.

To streamline our libraries and accelerate future development, we will remove the following legacy components in our v25.1 update:

DxDataGrid
DxComboBoxLegacy
DxTagBoxLegacy
DxListBoxLegacy

To avoid disruptions, please check your projects for components from the DevExpress.Blazor.Legacy namespace and migrate to new DevExpress alternatives.

Helpful resources:

Migrate from Data Grid to Grid

Legacy component deprecation details

Focus on Performance and Stability

While expanding our Blazor component suite remains a top priority, we are also investing heavily in polishing and performance optimizations this year. We will share additional info as we approach our mid-year release — but our ultimate goal is to ensure smooth, responsive user experiences across all DevExpress Blazor components.

.NET Upgrade Assistant Integration for Project Upgrades

We expect to ship a new plugin (VSIX) for Microsoft's .NET Upgrade Assistant. We expect this plugin to ultimately replace the DevExpress Project Converter for .NET 8+ projects. Benefits will include the following:

Unlike our Project Converter, the new plugin will have access to NuGet, Roslyn, MEF, and other IDE services. With the .NET Upgrade Assistant's auto–fix capabilities, we can automatically detect and safely resolve breaking changes in DevExpress code. This includes but is not limited to obsolete code replacements (such as, Font > DXFont, DxPivotGrid > DxPivotTable, etc.).
We will deliver the new plugin for minor and major DevExpress versions. The plugin will include the most recent Directory.Packages.props file updates (with DevExpress–compatible 3rd party dependencies for CPM). You will be able to update all project dependencies and resolve security vulnerabilities with a single click.

Our Unified Component Installer will automatically install the new plug–in. The plugin will also be able for download from the Visual Studio Marketplace, nuget.org, and nuget.devexpress.com.

Fluent Theme — Official Release

The DevExpress Blazor Fluent theme, introduced as a CTP in v24.2, will be production-ready in v25.1. Apart from polishing and visual enhancements/fixes for all components, we expect to introduce the following new features.

Built-in and Custom Accent Colors

Planned

Our Fluent theme will ship with a set of built-in accent color options.

Developers will also be able to configure custom accent colors to match user preferences or brand colors.

Different Icons for Every Size Mode

Planned

Instead of scaling icons, our Blazor components will use unique icon sets for every size mode - Small, Medium, and Large. This will ensure consistent and pixel-perfect appearance for your apps regardless of the selected sizing option.

Updated Fluent UI Kit

In Development

We've recently updated our Fluent UI Kit on Figma. In v25.1, it will be expanded to include all key DevExpress Blazor components.

Blazor Package Size Optimization

In Development

We plan to optimize the size of our Blazor libraries to increase initial loading speed and reduce the download size of your Blazor apps. Apart from removing legacy components, we plan to extract our themes/CSS into two separate packages:

Fluent themes
Extra themes (Blazing Berry, Blazing Dark, Office White, Purple)

We will also consider fully or partially removing default Bootstrap CSS that ships with our Blazor themes, as it can be downloaded separately.

App Showcase Demo (Discussion)

In Development

Our upcoming App Showcase will demonstrate common UI/UX patterns seen in modern business applications, built entirely with DevExpress Blazor components. Each demo module will prioritize clean, reusable code, making it easy to adapt.

New Project Template Gallery

In Development

We will expand the DevExpress Blazor Templates collection available in the DevExpress Cross-IDE Project Template Kit. The new Template Kit will also be installed alongside Blazor components and will become the default starting point for new DevExpress-based Blazor apps.

Blazor Pivot Table — Official Release (Discussion)

In v25.1, we plan to officially release our Pivot Table component. The production-ready version will be more robust and will include new features that will allow end-users to manipulate data directly in the UI.

Field Reordering

Planned

Field reordering will allow you to drag a field to any location within the same area or between available areas (Columns, Rows, or Data). This will allow end-users to modify the way they analyze data on the fly. New APIs will allow you to configure which Pivot Tables fields can be dragged.

Filter Data

In Development

We plan to introduce a built-in filtering UI to the Blazor Pivot Table. End-users will be able to filter column and row values using filter menu buttons in field headers. The filter menu will be similar to that of our Blazor Grid. Clicking the filter menu button will display a list of field values, allowing you to select which to display. For DateTime fields, the filter menu will display a hierarchical list.

Developers will also be able to filter data in code using new API members: SetFilterCriteria, GetFilterCriteria, and FilterCriteriaChanged.

Blazor Ribbon — Official Release

Our Blazor Ribbon, introduced as a CTP in v24.2, will be officially released. We will polish its look and feel and refine adaptivity and overflow menu behavior to ensure seamless interactions for applications that require a large set of commands.

The production-ready version will allow developers to replicate the single-line version of Ribbon interfaces used in modern MS Office apps (also known as Simplified Ribbon).

Blazor AI Chat

Prompt Suggestions

In Development

With v25.1, you will be able to display prompt suggestions via bubbles next to the input field when using the DevExpress Blazor AI Chat control (to guide chat users to possible actions).

File Attachments

Planned

You will also be able to attach files when sending messages.

API to Reuse an Existing OpenAI Assistant

Planned

Our Blazor AI Chat control will be able to connect to an already initialized OpenAI Assistant. This will allow you to use a single OpenAI Assistant instance to initiate multiple tasks within a single app.

Blazor Grid & TreeList (Discussion)

PDF Export

In Development

Our Blazor Grid and TreeList will ship with PDF export APIs. This new functionality will allow you to generate PDF documents while preserving key data presentation elements, including:

Column order, captions, and alignment
Value format and alignment
Group rows, group summaries, and group totals
Total summaries

We do not plan to support full WYSIWYG export, meaning that some UI elements (such as the group panel, search panel, toolbar, and pager, as well as custom CSS styles) will be excluded.

Blazor TreeList

Search

Planned

We plan to add a built-in search box to our Blazor TreeList. You will be able to introduce search functionality with minimal configuration.

Blazor Data Editors

Blazor Date Edit — Month/Year Picker View

Planned

Our Blazor Date Edit will allow you to limit its selection to months or years. This can be useful for forms and fields that don't require a specific date.

Blazor List Box — Select All

Planned

The DevExpress Blazor List Box will be able to display a Select All check box above its items, allowing faster selection of multiple items.

Blazor Date Edit & Time Edit — Custom Increment Step

Planned

Time rollers in Blazor Date Edit and Time Edit components will support custom increment steps. This will allow you to display fewer values (e.g., an hour in 15 minute intervals) when precise selection isn't necessary.

Blazor Map

Azure Maps Support

Released in v24.2.5

As you know, Microsoft recently discontinued availability of Bing Maps for Enterprise and its associated APIs. Azure Maps will be Microsoft's single unified enterprise mapping platform moving forward. Our Blazor Map UI component will support Azure Maps as a new map provider.

Blazor PDF Viewer

Set Download Name

Released in v24.2.5

Our new DocumentName property will allow you to set a custom name for documents downloaded using the PDF Viewer’s toolbar command or via a DownloadAsync method call.

<DxPdfViewer DocumentName="Sales Report" />

Blazor Rich Text Editor

Zoom

Coming in EAP v25.1

Our Blazor Rich Text Editor's built-in Ribbon will include a UI to specify zoom level for the current document.

It will also be possible to control the current zoom level using the Rich Text Editor's API.

Blazor Scheduler (Discussion)

In Development

In our upcoming release, we expect to support built-in toolbar customization. Our Scheduler will allow you to define custom toolbar items and customize the following built-in items:

Today button
Next and Previous buttons
Date navigator
Resource navigator
Scheduler View selector

Customization options will include:

Position and alignment of toolbar items.
Enabled, Visible, Tooltip, and Render Style properties.

<DxScheduler ...> 
    <ToolbarItems> 
        <DxSchedulerTodayToolbarItem /> 
        <DxSchedulerPreviousToolbarItem /> 
        <DxSchedulerNextToolbarItem /> 
        <DxToolbarItem Text="Group by Resource" Click="OnGroupByResourceClick" /> 
        <DxSchedulerResourceNavigatorToolbarItem /> 
    </ToolbarItems> 
    ...
<DxScheduler>

Resizing and Dragging for Appointment Form

Planned

End-users will be able to drag and resize our Blazor Scheduler's Appointment Edit Form, making it easier to view the rest of the calendar without discarding changes.

Appointment Form Customization

Planned

Our next update will introduce the following CSS classes:

AppointmentTooltipCssClass
AppointmentCompactEditFormCssClass
AppointmentEditFormCssClass

These classes will allow you to customize appointment popup styles, including default values for width and height.

In Development

We plan to optimize the performance of our Scheduler's dropdowns, forms, and tooltips (making them more responsive).

UI/UX Enhancements

Planned

We will introduce UI/UX enhancements designed to improve usability and overall appearance.

Blazor Reporting

Learn more: DevExpress Reports & BI Dashboard — June 2025 Roadmap (v25.1)

Your Feedback Matters

ASP.NET Bootstrap Controls – Bootstrap XSS Vulnerability Addressed, Support for Bootstrap v5.3.3 and Dark Mode

Margarita Loseva (DevExpress) — Fri, 04 Oct 2024 07:30:00 GMT

In this post, I'll detail the upgrade of DevExpress Bootstrap controls to Bootstrap v5.3.3, enhanced security-related updates to DevExpress Bootstrap project templates, and support for color modes.

New Bootstrap Version in Project Templates: XSS Vulnerability Addressed

DevExpress Bootstrap Controls are built atop the Bootstrap framework and depend on static Bootstrap resources. Over the years, DevExpress UI controls have supported Bootstrap v3 – v5, and in the past, DevExpress Bootstrap project templates have used Bootstrap v4.x.

With v22.2 (and through v24.2), DevExpress project templates use Bootstrap v5 by default (including the most recent version of Bootstrap – v5.3.3). This upgrade is not merely cosmetic in nature. It addresses a critical security vulnerability in Bootstrap v4.0 - v4.6.2 (see Bootstrap Cross-Site Scripting (XSS) vulnerability). Though DevExpress UI controls do not directly use Bootstrap scripts, inadvertent use of JavaScript Bootstrap in other parts of a project could expose an application to this vulnerability. Said simply, since the vulnerability was addressed in Bootstrap v5.0, our templates now use the most recent version of Bootstrap.

Upgrade Your Existing Project to v5

Because of the XSS vulnerability in earlier versions of Bootstrap, we highly recommend that you upgrade your existing Bootstrap project to v5 (to mitigate potential attack vectors and enhance the overall security posture of your application). To upgrade, you should:

Update your Bootstrap files. Navigate to the Bootstrap website and download the latest version. Replace old Bootstrap CSS and JS files in your project with new files. For additional information on Bootstrap v5, please refer to Migrating to v5.

Set the Bootstrap mode setting to Bootstrap5 in your project's Web.Config file:

<configuration>
    ... 
    <devExpress>
            <bootstrap mode="Bootstrap5" />
    </devExpress> 
    ... 
</configuration>

Dark Mode Support

Among the most exciting additions in newer versions of Bootstrap is built-in support for color modes. This feature allows developers to create applications that adapt to user preferences - enhancing accessibility and the overall user experience. Since we updated Bootstrap resources to v5.3.3, our DevExpress Bootstrap controls now support color modes. For example, when you apply a Bootstrap-based theme, you can easily switch to dark mode. To incorporate this capability, add the data-bs-theme attribute to the <html> element.

<html lang="en" data-bs-theme="dark">
    <head>
	   ... 
    </head>
</html>

As you can see in the image below, DevExpress UI controls fully integrate Bootstrap styling, ensuring that your application maintains a consistent look and feel.

What about Blazor components?

The most recent versions of DevExpress Blazor UI components (v24.1 and higher) do not rely on Bootstrap. However, they can use colors and other variables from Bootstrap themes. If you use Bootstrap in your Blazor projects, make certain to use Bootstrap v5.0 or higher. DevExpress Blazor components support Bootstrap v5.0 (v21.1) and Bootstrap v5.3 (v23.2+).

Have Questions?

If you still have questions regarding the Bootstrap XSS vulnerability or its impact on DevExpress UI components, please submit a support ticket via the DevExpress Support Center. We will be happy to follow up.

How to Use the DevExpress Blazor Drawer Component in Static SSR Mode

Svetlana Nikulina (DevExpress) — Wed, 02 Oct 2024 10:00:00 GMT

Microsoft's .NET 8 UI framework introduced static server-side render mode (static SSR) - where components are rendered on the server and returned to the client without any interactivity. The DevExpress Blazor Drawer component requires interactive render mode to dynamically change its IsOpen state.

In this blog I'll review two strategies to dynamically display/hide the DevExpress Blazor Drawer component in static SSR render mode:

Add query params to control drawer visibility.
Specify CSS rules to control drawer visibility.

For this example, I'm using a Blazor Web App created with a Microsoft Blazor project template. In this app, I registered appropriate DevExpress resources (review the following documentation topic for instructions: Get Started With DevExpress Components for Blazor) and replaced content in the MainLayout.razor page with the following code.

MainLayout.razor

<style>
    .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
        padding: 0;
    }
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
    <BodyTemplate>
        <div class="sidebar">
            <NavMenu />
        </div>
    </BodyTemplate>
    <TargetContent>
        <div class="top-row px-4">
            Here will be a toggle element.
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            @Body
        </article>
    </TargetContent>
</DxDrawer>

This markup creates a permanently visible drawer. Users can navigate between pages with it, but they are not yet able to modify visibility.

The First Strategy: Add Query Params to Control Drawer Visibility

Query params are key-value pairs that go after the ? character in a page URL. These parameters can set values for component properties.

To use a query parameter and change the drawer's IsOpen property value, you must:

Use the [SupplyParameterFromQuery] attribute to specify that the drawer's IsOpen parameter originates from the query string.

<DxDrawer IsOpen="@IsOpen">
...
@code {
    [SupplyParameterFromQuery]
    public bool IsOpen { get; set; }
}

Add an element to control drawer visibility. Wrap it in a NavLink component that navigates to the current page but toggles the IsOpen parameter.

@inject NavigationManager NavigationManager
<style>
    .drawer-toggler {
        position: absolute;
        appearance: none;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        top: 0.75rem;
        left: 0.75rem;
        border: 1px solid rgba(50, 50, 50, 0.1);
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
    }
</style>

...
@* Here will be a toggle element. *@
<NavLink href="@(new Uri(NavigationManager.Uri).LocalPath + "?IsOpen=" + (!IsOpen).ToString())">
    <input type="checkbox" title="Navigation menu" class="drawer-toggler"/>
</NavLink>
...

With this, users can click the toggle button to display/hide the drawer. However, when a user navigates to a different page, the drawer will disappear. To address this limitation, add the `IsOpen` query parameter to navigation links as follows.

Add the IsOpen parameter in the NavMenu component.

MainLayout.razor

<NavMenu IsOpen="@IsOpen" />

Replace the code in the NavMenu.razor file with the following code.

NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp</a>
    </div>
</div>

<nav class="flex-column">
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@GetUrlWithParameter("")" Match="NavLinkMatch.All">
            <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
        </NavLink>
    </div>

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@GetUrlWithParameter("weather")">
            <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
        </NavLink>
    </div>
</nav>

@code {
    [Parameter] public Boolean IsOpen { get; set; }

    string GetUrlWithParameter(string url) {
        return url + "?IsOpen=" + IsOpen.ToString();
    }
}

Now users can control drawer visibility with the Navigation menu checkbox.

Note: This approach is used within DevExpress Blazor project templates (v24.1.6+).

The Second Strategy: Specify CSS Rules to Control Drawer Visibility

CSS rules allow you to conditionally apply styles to elements based on the state of another component. With this approach, we will switch drawer visibility (set its width to zero) based on checkbox state. To implement this capability, you must:

Add a checkbox element that will toggle drawer visibility.

<style>
    .drawer-toggler {
        position: absolute;
        appearance: none;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        top: 0.75rem;
        left: 0.75rem;
        border: 1px solid rgba(50, 50, 50, 0.1);
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
    }
</style>

...
@* Here will be a toggle element. *@
<input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
...

Add the following CSS rule to set drawer panel width to zero when the checkbox is not selected.

.dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
    width: 0 !important;
}

With that, users can click the checkbox to display/hide the drawer.

The complete code is as follows:

<style>
    .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
        padding: 0;
    }

    .drawer-toggler {
        position: absolute;
        appearance: none;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        top: 0.75rem;
        left: 0.75rem;
        border: 1px solid rgba(50, 50, 50, 0.1);
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
    }

    .dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
        width: 0 !important;
    }
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
    <BodyTemplate>
        <div class="sidebar">
            <NavMenu />
        </div>
    </BodyTemplate>
    <TargetContent>
        <div class="top-row px-4">
            <input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            @Body
        </article>
    </TargetContent>
</DxDrawer>

To help you get started, we created an example that demonstrates use of CSS to control Drawer visibility and how to modify component configuration on mobile devices. You can download the example from our GitHub repository: Drawer for Blazor - Responsive Drawer in Static SSR Mode.

Blazor Component Suite — Early Access Preview (v24.2)

Svetlana Mikheeva (DevExpress) — Thu, 19 Sep 2024 09:00:00 GMT

As you may know, our next major update (v24.2) will ship in December. In this post, I'll summarize some of the features/capabilities available in our early access (EAP) build. Before I begin — a quick reminder: If you are an active Universal or DXperience subscriber and want to explore upcoming v24.2-related features/capabilities before official release, you can download our EAP build via the DevExpress Download Manager. Should you encounter issues with the EAP build, please submit a support ticket using the DevExpress Support Center.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds. This EAP does not include all features/products we expect to ship in our v24.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

.NET 9 Support

Our new v24.2 release supports .NET 9 Preview, which focuses on cloud-native applications and performance. To explore the features of this new .NET version, you can create a new Microsoft .NET 9 web app and add DevExpress resources. If you'd like to learn more about Blazor-specific enhancements in .NET 9, please review the following Microsoft article: What's New in ASP.NET Core 9.0.

.NET 8, .NET Framework 4.6.2, Visual Studio 2019 Will Be Minimally Supported Versions for DevExpress Libraries (v24.2+)

Learn more about this global change in this announcement.

New Blazor AI Chat Component

Whether looking to assist customer service representatives with suggested replies and relevant customer data, streamline repetitive tasks such as data entry and invoice processing, or adding a versatile AI-powered virtual assistant to your next Blazor app, look no further than the DevExpress Blazor AI Chat Component.

For more information, please refer to the following blog post: New DevExpress AI-Powered Blazor Chat Component.

New Blazor 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). The DevExpress Blazor Sankey component ships with the following capabilities:

Configurable nodes and links
Customizable node labels
User interaction options (hover and clicks)
Export and printing support
Sankey element customization: title, subtitle, and tooltips.

To explore the capabilities of the EAP-version of the DevExpress Sankey, please review the following Tutorial.

The new Blazor DropDown Button and Split Button are designed to extend the capabilities of your DevExpress-powered Blazor app and address a variety of usage scenarios. They include the following capabilities:

Customizable dropdown items or the ability to set a template for dropdown content.
Predefined RenderStyle and RenderStyleMode options.
Ability to specify custom button content.

To explore the capabilities of the EAP-version of the DevExpress Blazor DropDown Button, navigate to our locally installed Blazor demos and proceed to Utility Controls → DropDown Button. For more information, please refer to the following help topics: Split Button and DropDown Button.

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 and ships with the following capabilities:

Search delay
Appearance customization
Clear button and placeholder
Custom command buttons

To explore the capabilities of the EAP-version of the DevExpress Blazor Search Box, navigate to our locally installed Blazor demos and proceed to Data Editors → Search Box.

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:

Tabs
Date Range Picker

Blazor TreeList

Editing

The DevExpress Blazor TreeList now supports the following edit modes:

Edit Form/Popup Edit Form
Edit Row
Edit Cell

For all edit modes, you can implement input validation via Data Annotation attributes and configure editors using EditSettings and/or templates.

To explore the EAP-version of TreeList editing functionality, navigate to our locally installed Blazor demos and proceed to TreeList → Edit Data.

Export to Excel

The DevExpress Blazor TreeList can now export data to Excel. With our new APIs, you can save data to XLS, XLSX, and CSV, or stream. The following methods are available:

Data export operations support sorting, filtering, and total computation. You can also pass the ‘options’ parameter to export methods. This parameter allows you to customize the exported document.

To explore the EAP-version of our TreeList Export to Excel feature, navigate to our locally installed Blazor demos and proceed to TreeList → Export. For additional information/examples, please refer to the following help topic: TreeList Export.

New Filter Mode — Nodes

When using our 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.

To explore the EAP-version of this new filter mode, navigate to our locally installed Blazor demos and proceed to TreeList → Filter Data → Filter Row.

Self-Reference Data Binding Enhancements

Our 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 aRootValue property. If this property is specified, our 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.

Blazor Data Editors

List Box — Search

Our Blazor List Box now includes a built-in search box (allows users to filter List Box items and highlight search results). The search box is available for both single-column and multi-column modes.

To explore the EAP-version of this feature, navigate to our locally installed Blazor demos and proceed to Data Editors → List Box → Search Box.

Validation API

To better address accessibility standards and improve user experiences, DevExpress Blazor Editors now display validation error icons by default. To reduce visual noise, we’ve disabled our “success” validation state (previously indicated by a green border and icon). The following API members allow you to fine-tune validation appearance as needs dictate:

ShowValidationIcon - Specifies whether to display validation icons.
ShowValidationSuccessState - Specifies whether to show a green border and icon after successful validation.
ValidationEnabled - Specifies whether this component should validate entered data.

All settings are available for individual editors, EditSettings, and GlobalSettings that specify the default behavior for the entire app.

To explore the EAP-version of our new validation API, simply access our locally installed Blazor demos and proceed to Data Editors → Common Concepts → Validate Input.

Blazor Tabs

Close Tab Button

In v24.2, you can enable the ShowCloseButton property to control whether the tab’s header displays a Close button. Clicking this button triggers the TabClosing event, which allows you to display a confirmation dialog or implement custom logic before closing the tab.

To explore the capabilities of the EAP-version of DevExpress Blazor Tabs, navigate to our locally installed Blazor demos and proceed to Layout → Tabs → Scroll Mode.

Blazor TreeView

Performance Enhancements

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

We tested three key scenarios and noted consistent performance improvements. Note that each test run may show different results, but the difference between the two versions remains consistent. The following graphics illustrate internal test results (tested on an AMD Ryzen 7 5800H with Radeon Graphics, 32 GB RAM):

Blazor 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.

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to share your v24.2 EAP-related feedback in the form below:

New DevExpress AI-Powered Blazor Chat Component — Early Access Preview (v24.2)

Dmitry Tokmachev (DevExpress) — Wed, 18 Sep 2024 06:45:00 GMT

Note: The following content refers to our Early Access Preview (EAP) build (v24.2). APIs/features outlined herein may have changed in the subsequent release cycles (v24.2 Beta and our Official Release). Review our What's New in v24.2 summary for up-to-date product information.

The DevExpress Blazor AI Chat Component is a new UI library designed to incorporate AI-driven interactions into your next great app (and deliver responsive Copilot-inspired interfaces with absolute ease).

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please back up your project and other important data before installing Early Access and CTP builds. This EAP may not include all features/products we expect to ship in our v24.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in the upcoming months.

Should you encounter an issue while using this Early Access Preview build (v24.2), feel free to submit a support ticket via the DevExpress Support Center. We will be happy to follow up.

New DevExpress Blazor AI Chat (DxAIChat) Component

The new DevExpress AI Chat (DxAIChat) component (available as an Early Access Preview in our v24.2 release cycle) ships with the following features/capabilities:

Seamless & Painless AI Integration: Connect to OpenAI, Azure OpenAI, and self-hosted models running on Ollama.
OpenAI Assistants Support
Streaming Responses: Display AI-generated responses in real-time as they are being processed.
Regenerate Responses: Refresh responses from AI services to ensure information is up-to-date and relevant.
Copying: Quickly copy chat content (share or store as needed).
Customizable Message Templates: Define and style your messages using customizable templates.
Flexible Message Rendering: Display chat responses in plain text or markdown (easy conversion to HTML with any Markdown-to-HTML library).
Error Display: Display error information and improve troubleshooting processes (and of course enhance your app's user experience/engagement).
Customizable Empty States: Define custom text and descriptions for empty states within the chat interface.
and yes, our AI Chat component ships with DevExpress Blazor Theme support.

Getting Started

Prerequisites

To use AI Chat, your project must meet the following prerequisites:

.NET 8 SDK
An Active DevExpress Universal or DXperience Subscription (to download/use the Early Access Preview v24.2 build).
For Open AI:
- An active Open AI Subscription.
- An API Key.
- The OpenAI .NET SDK
For Azure Open AI:
- An active Azure subscription and the Azure Open AI Service resource. Refer to the following tutorial to set up the resource: Create and deploy an Azure OpenAI Service resource.
- The Azure OpenAI .NET SDK.
For self-hosted Models:
- Install Ollama
- Download and run any supported model: Models.

Add the Blazor AI Chat Component to Your Application

The following steps will add the Blazor Chat (DxAIChat ) component to your Blazor application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If using a Microsoft project template or if you already have a Blazor project, configure your project to add DevExpress Blazor components.
Install the following NuGet packages:
- DevExpress.AIIntegration
- DevExpress.AIIntegration.OpenAI or DevExpress.AIIntegration.Azure.OpenAI or DevExpress.AIIntegration.Ollama (based on requirements)
- DevExpress.AIIntegration.Web
- DevExpress.AIIntegration.Blazor.Chat
Call the AddDevExpressAI method at application startup and register the chat client to enable AI services:

Program.cs:

using DevExpress.AIIntegration;
...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "YourModelDeploymentName"
...
builder.Services.AddDevExpressBlazor();
builder.Services.AddDevExpressAI((config) => {
    config.RegisterChatClientOpenAIService
        new AzureOpenAIClient(
            new Uri(azureOpenAIEndpoint),
            new AzureKeyCredential(azureOpenAIKey)
        ), deploymentName);
    //or call the following method to use self-hosted Ollama models
    //config.RegisterChatClientOllamaAIService("http://localhost:11434/api/chat", "llama3.1");
});

Add the <DxAIChat>…</DxAIChat> markup to a .razor file:

@using DevExpress.AIIntegration.Blazor.Chat
@using AIIntegration.Services.Chat;

<DxAIChat CssClass="my-chat">
</DxAIChat>

Enable interactivity to use the DxAIChatcomponent in your application. Refer to the following help topic for additional information: Enable Interactive Render Mode.
Run the application and start chatting with the AI client of your choice.

Customization

In this section, I will document customization options available to you and your users (customization designed to modify behaviors/appearance settings).

Customize Message Rendering

Use <MessageContentTemplate>...</MessageContentTemplate> to customize messages. Set the RenderMode property value to AnswerRenderMode.Markdown to use a Markdown processor of choice (in this example, I'm using Markdig):

@page "/"
@using Markdig;
@using DevExpress.AIIntegration.Blazor.Chat
@using AIIntegration.Services.Chat;

<DxAIChat CssClass="my-chat" RenderMode="AnswerRenderMode.Markdown">
    <MessageContentTemplate>
        @ToHtml(context.Content)
    </MessageContentTemplate>
</DxAIChat>

@code {
    MarkupString ToHtml(string text) {
        return (MarkupString)Markdown.ToHtml(text);
    }
}

Customize Message Appearance

To change the appearance of message bubbles, use the <MessageTemplate>...</MessageTemplate> markup. Here is an example of custom CSS classes for different messages based on a role within the chat:

    
	.my-chat .my-chat-message {
        padding: 10px;
        border-radius: 10px;
        width: calc(100% - 60px);
        box-shadow: 0px 2px 6px -2px;
    }

    .my-chat .my-chat-message. my-assistant-message {
        background-color: rgba(76, 255, 0, 0.2);
        align-self: self-start;
    }

    .my-chat .my-chat-message. my-user-message {
        background-color: #FFF;
        align-self: self-end;
    }
    
    .my-chat .my-chat-message. my-error-message {
        background-color: rgb(255, 0, 0, 0.2);
        align-self: center;
    }

<DxAIChat CssClass="my-chat">
    <MessageTemplate>
        <div class="@GetMessageClasses(context)">
            @if(context.Typing) {
                <span>Loading...</span>
            } else {
                @ToHtml(context.Content)
            }
        </div>
    </MessageTemplate>
</DxAIChat>

string GetMessageClasses(ChatMessage message) {
    if(message.Role == ChatMessageRole.Assistant) {
        return "my-chat-message my-assistant-message";
    } else if(message.Role == ChatMessageRole.User) {
        return "my-chat-message my-user-message";
    } else if(message.Role == ChatMessageRole.Error) {
        return "my-chat-message my-error-message";
    }
    return "my-chat-message";
}

Customize the Empty State

To customize the picture and message displayed when a chat has yet to start, use the<EmptyMessageAreaTemplate>...</EmptyMessageAreaTemplate> markup. For example:

.my-chat .my-chat-ui-description {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

<DxAIChat CssClass="my-chat">
    <EmptyMessageAreaTemplate>
        <div class="my-chat-ui-description">
            AI Assistant is ready to answer your questions. 
        </div>
    </EmptyMessageAreaTemplate>
</DxAIChat>

Manually Handle Chat Messages

To manually handle messages sent to an AI service, handle the MessageSent event. For example, you can manually call the AI client or service of choice and return its responses to the chat. The following example demonstrates how to add responses to user questions:

<DxAIChat CssClass="my-chat" MessageSent="MessageSent">
</DxAIChat>
@code {
    DxAIChat chat;
    void MessageSent(MessageSentEventArgs args) {
        var message = new Message(MessageRole.Assistant, $"Processed: {args.Content}");
        args.SendMessage(message);
    }
}

Enable Streaming

By default, when a user sends a request to the AI client, the entire response is generated before it is sent back. If users generate lengthy queries, waiting for the response can take several seconds.

To receive responses sooner, you can stream the response as it is being generated. This allows you to start displaying the beginning of the response before it is complete. Use the UseStreaming property to enable streaming mode:

<DxAIChat CssClass="my-chat" UseStreaming="true">
</DxAIChat>

Here's a video demonstrating streaming mode in action:

Leverage BlazorWebView to Integrate AI Chat into WinForms, WPF, and .NET MAUI Apps

Thanks to both Blazor Hybrid technology and BlazorWebView, you can reuse your existing implementation and host our new Blazor AI Chat (DxAIChat ) component in any WinForms, WPF, and/or .NET MAUI app. To learn more about the underlying tech, refer to the following help topic: Create a Blazor Hybrid Project.

To help you get started, we created an example that integrates the DevExpress Blazor AI Chat component into the aforementioned platforms. You can download the example from our GitHub repository here: Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application.

Things to consider:

The ISelfEncapsulationService interface: This interface allows you to work directly with aDxAIChat component instance/properties from within the desktop or mobile app.
Built-in DxAIChat wrappers: These wrapper classes initialize required Blazor Theme scripts.
Custom CSS classes are used to hide the built-in input field and send button (the index.html file).

The following screenshots demonstrate the DevExpress Blazor AI Chat Component used within Windows Forms and .NET MAUI Mobile applications:

Create An Assistant to Chat with Your Own Data

One of the exciting capabilities we ship in the Early Access Preview build is a new proof-of-concept feature that leverages OpenAI Assistants (which are currently at an experimental stage).

Assistants may have instructions and can employ models, tools, and files to respond to user queries. They allow you to enhance the user experience by providing a model with supplementary documents/external knowledge. OpenAI automatically parses these documents and searches through them to retrieve relevant content to better respond to user queries. To learn more about the concept of Assistants, please review the following:

To register the Open AI Assistant service in your application, add the following code to the Program.cs file:

builder.Services.AddDevExpressAI((config) => {
    config.RegisterOpenAIAssistants(client, "gpt4o");
});

Next, include a supplementary document in the project file as an EmbeddedResource:

<EmbeddedResource Include="Data\Restaurant Menu.pdf" />

Finally, handle the Initialized event and call the UseAssistantAsync method to supply a file to the Open AI Assistant at runtime:

<DxAIChat CssClass="my-chat" Initialized="Initialized">
</DxAIChat>

@code {
    const string DocumentResourceName = "File.pdf";
    const string prompt = "You are an analytics assistant specialized in analyzing PDF files. Your role is to assist users by providing accurate answers to their questions about data contained within these files.";

    async Task Initialized(IAIChat chat) {
        await chat.UseAssistantAsync(new OpenAIAssistantOptions(
            $"{Guid.NewGuid().ToString("N")}.pdf",
            Assembly.GetExecutingAssembly().GetManifestResourceStream(DocumentResourceName),
            prompt)
        );
    }
}

Once implemented, your users can "chat" with data displayed in various UI components and ask natural language questions. Dan Roth, Microsoft Principal Program Manager, demonstrated this capability using DevExpress Blazor components at a recent online event .NET Conf: Focus on AI. Navigate to the following YouTube video to see this functionality in action: .NET Conf: Focus on AI - Build interactive AI-powered web apps with Blazor and .NET - Daniel Roth. Note: You can play with file formats for a better user experience (i.e., plain text files demonstrate better results when working with Open AI Assistants).

Download A Sample Project

To help you get started, we’ve created an example project that integrates the new DevExpress Blazor AI Chat component into apps across various platforms, showcasing all the customization capabilities mentioned in this article. You can download the example from our GitHub repository here: Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application

Your Feedback Counts

Please respond to the following survey and share your AI Chat-related requirements with us.

Blazor — Year-End Roadmap (v24.2)

Slava Khudyakov (DevExpress) — Mon, 22 Jul 2024 15:00:00 GMT

As always, thank you for your continued support and your interest in the DevExpress Blazor UI component suite. The following Year-End Roadmap (v24.2) documents what we expect to ship in December 2024 (including 10+ new components).

As always, if you have questions or suggestions, feel free to share your thoughts in the survey at the end of this post or submit a ticket via the DevExpress Support Center.

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.

.NET Ecosystem

.NET 9 Support

We will support .NET 9 across our Blazor component suite (v24.2 and v24.1) after November 2024. We will also add support for the latest .NET 9 previews for v24.1 (for early adopter testing). If you'd like to learn more about Blazor-specific enhancements in .NET 9, please review the following Microsoft article: What's New in ASP.NET Core 9.0.

.NET 8, Visual Studio 2019 Are Minimally Supported Versions for DevExpress Libraries in v24.2

To learn more about this global change and how it will impact your DevExpress-powered Blazor project, please review the following announcement.

Source Code Builder Enhancements

With v24.2, we will simplify the steps needed to rebuild assemblies from source code:

Our source builder tool will be a part of our Unified Component Installer, not a separate download.
The new tool will be more stable (we added more internal tests for the rebuild process on our build farm) and require fewer steps.
It will be easier to rebuild .NET Core/.NET projects (currently, it is a manual process) and generate corresponding NuGet packages (including localization packages).

New Blazor Splitter

Our new Blazor Splitter component will allow you to separate web page content into multiple resizable panes. The DevExpress Splitter component will support unlimited nested splitter panes, allowing for the creation of complex layouts.

Key features will include:

Ability to specify horizontal or vertical orientation for the splitter.
Live content refresh during resize operations for the best possible user experience.
Panes that can be collapsed or expanded with specific buttons.
Customizable visual appearance of splitter elements.

New Blazor Ribbon

v24.2 will include a new Blazor Ribbon component, a tabbed toolbar designed to organize multiple command items across different tabs. Our Blazor Ribbon will include data-bound mode support, allowing you to obtain tab, group, and item information from a data source.

Key features will include:

Support for multiple editors as items, including buttons, text boxes, combo boxes, and more.
Compact design that displays all items within an active tab in a single line.
Context tabs that combine different items into categories, appearing on the ribbon when users select specific objects.

New Blazor Dialog

Our Blazor Dialog component will include a set of predefined alert and confirm dialogs, similar to those in JavaScript. This capability will allow you to pass parameters to a method, display the dialog, and handle user actions without the need for custom Razor markup.

 bool result = await DialogService.ShowConfirmAsync(new DialogOptions {     Title = "Delete a record",     Text = "Are you sure you want to delete this record?",     RenderStyle = DialogRenderStyle.Danger     });

New Blazor Range Selector

We expect to ship our Blazor Range Selector in our next major update (v24.2). As you'd expect, the DevExpress Range Selector will allow 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 integrates well with our Blazor Chart library, enhancing data filtering and visual range setting experiences.

Key features will include:

Customization of major/minor scale ticks.
Scale label customization for a personalized display.
Customization options for slider handles and markers.
Configurable shutter settings and much more.

New Blazor Carousel

v24.2 will ship with a new Blazor Carousel component, designed to display an image collection using a carousel UI metaphor. The DevExpress Blazor Carousel will include multiple navigation controls and allow users to easily switch images.

Key features will include:

Support for slide show and loop functionality.
Navigation buttons and dot indicators for intuitive image navigation.
Flexible item template support for customized content presentation.

New Blazor Sankey

Our next major update will include a new Blazor Sankey component, a visualization tool used to depict the flow from one set of values to another. Sankeys are best used when you want 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).

Key features will include:

Customizable appearance of node labels.
Configurable nodes and links.
Title and subtitle settings.
Tooltip customization.

We expect to add three new button components to the DevExpress Blazor UI suite in our v24.2 release cycle (Blazor Split Button, Dropdown Button, and Button Group). These new Button types will help extend the capabilities of your DevExpress-powered Blazor app and address a variety of usage scenarios.

Our new Blazor Search Box will allow you to introduce a search UI anywhere within your Blazor app (and maintain UI consistency when using other DevExpress Blazor components). Key features will include:

Search icon
Placeholder text
Clear button
Validation icons
Size mode support

Keyboard Support

To better align with accessibility standards and improve user experiences for those with disabilities, we plan to add keyboard navigation support to the following Blazor UI components:

Scheduler
FormLayout
Tabs
DateRangePicker
Window

Blazor TreeList

Official Release

In addition to new features and enhancements, our Blazor TreeList will be ready for production use. We will finalize its APIs/behaviors and minimize potential breaking changes for those currently using it within a project.

Data Editing

We expect to introduce the following Blazor TreeList data editing modes in our v24.2 release cycle:

Edit Form / Popup Edit Form
Edit Row
Edit Cell

For all edit modes, you will be able to introduce input validation via Data Annotation attributes and configure editors using EditSettings and/or templates.

Export to Excel

Our Blazor TreeList component will support XLSX, XLS, and CSV data export. For Excel files, node hierarchy will be implemented with outlines.

Save & Restore Layout

Much like our Blazor Grid, the DevExpress Blazor TreeList will include APIs to save layout information to a local storage, database, or a remote service. As you might expect, you will be able to store the following layout information:

Applied filters;
Pager state;
Column position, sort index, visibility, and width.

New Filter Mode — Nodes

In this new filter mode, the TreeList will display all nodes that meet the applied filter criteria as a plain list. This is useful when working with large collections and when finding specific records is more important than keeping node hierarchy visible.

API Enhancements

We expect to extend our Blazor TreeList's API with the following members:

RootValue - specifies the ParentID value used to distinguish root-level nodes in self-reference data sources (default is 0).
AutoExpandAllNodes - specifies whether to expand all nodes when TreeList data is loaded for the first time.

Blazor Grid & TreeList

Row Drag & Drop

Both our Blazor Grid and TreeList components will feature built-in support for row-based drag and drop operations. Users will be able to reorder rows, change tree hierarchies, and/or move rows from one table to another.

New Item Row

Our Blazor Grid and TreeList will be able to display an empty row below or above data records. This empty row can be used to add new records quickly (especially when using Cell Edit mode).

Blazor Data Editors

ComboBox, TagBox & List Box — Grouping

ComboBox, TagBox, and List Box will be able to split items in a list into non-collapsible groups. Groups make the list of options more readable and help users locate required options more quickly.

ComboBox, TagBox & List Box — Disable Items

We will release APIs to disable individual ComboBox/TagBox/List Box items. Disabled items are greyed out and cannot be selected.

List Box — Search

A built-in search box will allow users to filter List Box items and highlight search results.

Blazor PDF Viewer

Official Release

In our upcoming release, we will address a series of known limitations and enhance overall stability to ensure that the DevExpress Blazor PDF Viewer is robust and ready for production apps.

Blazor Tabs

Close Tab Button

Our built-in close button feature will simplify the use of the close tab option in your DevExpress-powered Blazor app (by eliminating the need for custom templates or additional markup).

Tab Reorder

v24.2 will allow users to reorder tabs by dragging them to a desired position.

Blazor Charts

Crosshair

Crosshairs are thin vertical and horizontal lines centered on a data point within a chart. This feature helps users identify series point values in a precise manner. When enabled, the crosshair follows the cursor and snaps to the nearest series point, enhancing data analysis and associated user experiences.

Zoom and Pan Change Events

Zoom and pan change events will allow you to handle zoom/pan operations and send API requests for new data and repopulate charts as needed. This will be of importance if your solution analyzes large datasets (thanks to the use of data aggregation before sending it through the API).

Selection API

In our upcoming release, we will introduce new methods to allow you to programmatically select series or points, as well as clear selections. This functionality will benefit those who must display selected values at startup.

New Aggregation Interval Property

Our new aggregation interval feature will aggregate series points that fall within the same interval. If the axis displays numeric values, you will assign a number to this property. For instance, an aggregation interval of 100 will create intervals like 0 to 100, 100 to 200, 200 to 300, etc. If the axis displays date-time values, you will set this property to an accepted string values such as 'days', 'months', 'years', and others.

Blazor Report Viewer & Report Designer

SqlDataSource — Microsoft Azure SQL Support with Microsoft Entra Authentication

We will add support for Microsoft Entra (formerly Azure Active Directory) authentication in SqlDataSource for Microsoft Azure SQL databases. This update will allow you to seamlessly connect to Azure SQL databases using modern and secure authentication methods. We will extend the MsSqlAuthorizationType enumeration with the following types (mirroring those found in .NET):

ActiveDirectoryPassword
ActiveDirectoryIntegrated
ActiveDirectoryInteractive
ActiveDirectoryDefault

The latter three options will require use of theMicrosoft.Data.SqlClient NuGet package in your application.

Automatically Resolve Missing Fonts

We expect to introduce a new built-in method or API to automatically detect missing fonts in your application’s hosting environment (such as various Docker images, Azure App Service, etc.), download them from Google Fonts, and add them to the DXFontRepository. This implementation is based on the approach detailed in the following blog post: How to Manage Fonts and Deliver a Unified User Experience when Using DevExpress Reports and Office File API. This enhancement will ensure that the reports appear as designed, regardless of the hosting platform.

Additionally, we will include an option to log the names of any missing fonts to the application output. This feature will help you identify and resolve document appearance issues.

Note that while Google Fonts are open-source, not all fonts are free for commercial use and may require a license for distribution. We recommend reviewing the associated license agreements to ensure compliance with usage rights for your specific needs.

Web Report Viewer — SVG Print Preview

In our next release, we will introduce an option to enable SVG-based print preview functionality within the DevExpress Web Report Viewer. This enhancement will reduce the viewer's memory footprint when transferring report page data between the server and client (i.e., when navigating through the document, zooming the document, etc.). This enhancement will also enable users to preview reports with high fidelity using Scalable Vector Graphics (SVG), ensuring sharp and clear representations of report elements.

HTML Export — Preserve Rotated Text

We will introduce expanded text rotation options for reports exported to HTML. With this update, the XRLabel control in resulting HTML files will preserve the text rotation defined by its Angle property (supported angles are 90 degrees, 180 degrees, and 270 degrees, and their negative counterparts). This enhancement will ensure that your DevExpress Reports-powered document's text orientation is accurately maintained during HTML export, providing a consistent visual appearance across different formats.

PDF Export — Export Bookmarks

With this new feature, you will be able to simplify/enhance navigation for PDF documents generated from your reports. Bookmarks added to your report will now be preserved in the exported PDF document, allowing users to quickly jump to specific sections within large documents.

DateOnly & TimeOnly Support

We will introduce support for DateOnly and TimeOnly values across DevExpress Reports. This update will allow you to utilize the aforementioned types when:

creating expression bindings
report and query parameters
calculated fields
and when sorting, grouping, and filtering data.

Refer to the What's New in v24.1 to learn more about recent enhancements in this particular space.

New AI-Powered Enhancements

We will integrate AI-Powered Summarize and Translate features into our Report Viewer components. These enhancements will allow users to quickly understand/analyze core insights associated with a given report (using Generative AI summaries) and convert report documents to a desired language with AI-powered translation tools.

To leverage these capabilities, you will need to use your own Microsoft Azure Open AI API key or use offline open-source models powered by Ollama and/or Onnx Runtime.

Report Designer — Dimension Notations

To simplify the report design process, v24.2 will introduce dimension notations within the DevExpress Report Designer. When you resize controls, the designer will provide precise visual feedback and display dimension notations based on a specified ReportUnit property value (such as inches, centimeters, or pixels).

New Barcode Types — Aztec & Micro QR Code

Our next major update will support the following Barcode types: Aztec and Micro QR Code

Aztec barcodes offer a compact/efficient way to encode large amounts of data without requiring a quiet zone, making them ideal for space-constrained documents.
Micro QR Codes offer a smaller alternative to traditional QR Codes, suitable for space-limited output (where only small amounts of data require encoding).

Text Selection and Copying to Clipboard

The DevExpress Blazor Report Viewer will allow end-users to select and copy report content.

Shortcuts for macOS

We will duplicate shortcuts for Blazor Report Designer and Report Viewer tailored for macOS users (utilizing the Command ⌘ key).

Custom Parameters Validation

A new API will allow you to implement custom validation rules for report parameter inputs, including enforcing mandatory parameters.

Incremental Search in Parameters

We will introduce incremental searching for parameters linked to data collections.

Interactive Margins

Users will have the ability to modify document margins directly within a Report Viewer interface.

Long-term Initiatives

While our roadmap showcases key features we expect to deliver in our v24.2 release cycle, we have begun initiatives that cannot be completed within a single release cycle. Some of these initiatives may or may not make it to the final release. Notable initiatives include:

New Fluent Theme

We will introduce a new Fluent-like theme over the next two major release cycles (to modernize the visual design of our Blazor component libraries). This initiative aligns with established design/usability standards. As you would expect, we will continue to support existing themes to ensure maximum flexibility and minimize breaking changes to current projects.

Pivot Grid

Over the next two major release cycles, we plan to introduce a new Blazor Pivot Grid component. Our new Pivot Grid component will offer advanced features and improved overall performance for a variety of data analysis usage scenarios. To prevent breaking changes in current projects, we will create a new Pivot Grid component alongside our existing offering.

Your Feedback Matters

Blazor Component Suite — Early Access Preview (v24.1)

Alex Chuev (DevExpress) — Tue, 26 Mar 2024 15:15:00 GMT

As you may know, our next major update (v24.1) will ship in a few months. In this post, I'll summarize some of the features/capabilities available in our early access (EAP) build. Before I begin — a quick reminder: If you are an active Universal or DXperience subscriber and want to explore upcoming v24.1-related features/capabilities before official release, you can download our EAP build via the DevExpress Download Manager. Should you encounter issues with the EAP build, please submit a support ticket using the DevExpress Support Center.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds. This EAP does not include all features/products we expect to ship in our v24.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

TreeList (CTP)

This EAP includes the first version of our Blazor TreeList with the following features:

Binding to flat (self-referenced) data
Horizontal and vertical scrolling
Paging
Sorting
Filter Row
Total Summaries
Column Resizing and Reorder

We expect to support additional data binding modes/features for the final v24.1 build. To explore the capabilities of the EAP-version of the DevExpress Blazor TreeList control, simply access our locally installed Blazor demos and proceed to TreeList → Overview.

HTML Editor

Our Blazor HTML Editor allows you to format text and visual content and store it as HTML or Markdown. Users can apply inline formatting and modify font, size, and color as needs dictate. Additionally, the DevExpress Blazor HTML Editor now offers a range of block formatting features, including headings, text alignment, lists (bullet and numbered), code blocks, and quotes.

To explore the capabilities of the EAP-version of the DevExpress Blazor HTML Editor, simply access our locally installed Blazor demos and proceed to HTML Editor → Overview.

File Input

Our new Blazor File Input component allows you to introduce file upload functionality to your Blazor app without creating a separate Web API project with an upload controller.

Our Blazor File Input control supports multiple upload modes (Instant and OnButtonClick), can upload multiple files simultaneously, and allows you to validate file size and extension both on the client and server.

Handle the FilesUploading event to upload selected files. For each file, the event supplies a Stream you can open to read file content. Once the read operation is complete, you can send the file to another destination, save it to the file system, or display the file content on a web page.

The following code snippet configures FileInput to upload files to a specified folder:

<DxFileInput FilesUploading="OnFilesUploading" /> 

@code { 
    async Task OnFilesUploading(FilesUploadingEventArgs args) { 
        foreach (var file in args.Files) { 
            Stream? stream = default; 
            var filePath = "full path to the uploaded file";  
            FileStream fs = new(filePath, FileMode.Create); 
            try { 
                if(IsValidFile(file)) { 
                    stream = file.OpenReadStream(int.MaxValue); 
                    await stream.CopyToAsync(fs);  
                } 
            } 
            catch (Exception ex) { 
                if (file.CancellationTokenSource.IsCancellationRequested) 
                    // Handle the cancel action here  
            } 
            finally { 
                await fs.FlushAsync(); 
                fs.Close(); 
                if (stream != null) 
                    stream.Close(); 
            } 
        } 
    } 
}

To explore the capabilities of the EAP-version of the DevExpress Blazor File Input control, simply access our locally installed Blazor demos and proceed to File Management → File Input.

The DevExpress Blazor DropDown Box is a highly customizable editor - designed to display/use a variety of UI elements within its drop-down window: from simple lists and trees, to grids, or any combination thereof. You can assign an editor value programmatically based on page interactions.

The following code snippet adds the DevExpress Blazor Grid to the DropDown Box popup.

<DxDropDownBox Value="Value" QueryDisplayText="QueryText" > 
    <DropDownBodyTemplate> 
        <DxGrid Data="@GridData" ShowSearchBox="true" SelectedDataItem="@Value" 
            SelectedDataItemChanged="item => GridSelectedDataItemChanged(item, context.DropDownBox)" .../> 
    </DropDownBodyTemplate> 
</DxDropDownBox> 

@code { 
    Customer Value { get; set; } 
    IEnumerable<object> GridData { get; set; } 
    string QueryText(DropDownBoxQueryDisplayTextContext arg) { 
        if(arg.Value is Customer value) 
            return value.ContactName; 
        return string.Empty; 
    } 
    
    void GridSelectedDataItemChanged(object item, IDropDownBox dropDownBox) { 
        Value = item as Customer; 
        dropDownBox.HideDropDown(); 
    } 
}

To explore the capabilities of the EAP-version of the DevExpress DropDown Box control, simply access our locally installed Blazor demos and proceed to Data Editors → DropDown Box.

Toast

Our new Blazor Toast component allows you to notify users about processes and events. Notification messages can remain visible until a user clicks the close button or closed automatically after a predetermined amount of time. The DevExpress Blazor Toast component supports four theme modes (Dark, Light, Pastel, and Saturated) and the following notification styles:

Danger
Info
Primary
Success
Warning

You can place a DxToast component in markup and call the Show method to display it.

<DxToastProvider Group="ToastContainer" /> 
<DxToast @ref=toast Text="The process has been completed." Group="ToastContainer" /> 

@code { 
    DxToast toast; 
    toast.Show(); 
}

<DxToastProvider Group="ToastContainer" /> 

 @code { 
    [Inject] IToastNotificationService ToastService { get; set; } 

    ToastService.ShowToast(new ToastOptions { 
        Group = "ToastContainer", 
        Text = "The process has been completed." 
    }); 
}

To explore the capabilities of the EAP-version of the DevExpress Blazor Toast control, simply access our locally installed Blazor demos and proceed to Dialogs and Windows → Toast Notification.

Drawer

Our new Blazor Drawer component allows you to add a "dismissible" navigation side panel to your web application. The control includes the following features:

Left-side and right-side position.
Overlap and shrink display modes.
The minimized drawer state.
Header, body, and footer templates.

To explore the capabilities of the EAP-version of the DevExpress Blazor Drawer control, simply access our locally installed Blazor demos and proceed to Layout → Drawer.

Map

The DevExpress Blazor Map component can display geo maps with markers and route info within your Blazor-powered web app. The component retrieves relevant data from a GIS service (Bing, Google, or GoogleStatic - requires application authentication with an appropriate API key) and ships with the following capabilities:

Marker/route configuration and customization options.
Built-in map navigation and type controls.
Manual map adjustment.
Map and marker "click" support.

To explore the capabilities of the EAP-version of the DevExpress Blazor Map control, simply access our locally installed Blazor demos and proceed to Map → Overview.

Polar Chart

The DevExpress Polar Chart for Blazor allows you to visualize data within a polar coordinate system - where each point on a plane is determined by the distance from the center and the angle from a fixed direction. The DevExpress Blazor Polar Chart component ships with the following capabilities:

Multiple series types: line, area, bar, stacked bar, and scatter.
Continuous, discrete, and logarithmic axis value support.
Spider web mode.
Chart element customization: labels, tooltips, legend, and many more.

To explore the capabilities of the EAP-version of the DevExpress Blazor Polar Chart, simply access our locally installed Blazor demos and proceed to Charts → Polar and Radar.

Bar Gauge

Our Bar Gauge for Blazor displays data as circular bars - where each bar indicates a single value. Our Blazor Bar Gauge ships with the following capabilities:

Geometry and layout configuration.
Palette customization.
Export and printing support.
Real-time data updates.
Gauge element customization: labels, tooltips, legend, and many more.

To explore the capabilities of the EAP-version of the DevExpress Blazor Bar Gauge control, simply access our locally installed Blazor demos and proceed to Bar Gauge → Geometry.

Sparklines

Sparklines for Blazor displays value trends using a compact UI metaphor. You can use DevExpress Blazor Sparklines as a standalone component or embed it into other UI controls. Sparklines support multiple series types and allows you to configure series-specific and general settings at the root component level.

To explore the capabilities of the EAP-version of the DevExpress Blazor Sparkline control, simply access our locally installed Blazor demos and proceed to Charts → Sparklines.

New Rendering Engine

The following DevExpress Blazor components now use our optimized rendering engine (instead of Bootstrap):

Charts
Rich Text Editor
Scheduler

Keyboard Support

To address accessibility standards and improve user experiences for those with disabilities, v24.1 adds keyboard navigation support for the following Blazor UI components:

Date Edit
Time Edit
Tree View

Project Templates

.NET 8 Authentication and Authorization

Our Blazor project templates for .NET 8 include an option to add ASP.NET Core Identity and Token-based Authentication to your projects. In addition to the necessary infrastructure, our templates generate an authentication interface powered by DevExpress Blazor components.

Grid

Header Bands

The DevExpress Blazor Grid can now arrange columns into logical groups called bands. Each band contains its own header displayed above column headers. The Grid also supports multi-level bands wherein a band can include other bands within it (as well as columns without a band so as to span the entire band region).

While end-users can reorder columns within bands or move them to the Group Panel, column movement between bands is restricted.

To explore the capabilities of the EAP-version of the DevExpress Blazor Grid control, simply access our locally installed Blazor demos and proceed to Grid → Columns → Header Bands.

Export Server-Side Data to Excel

v24.1 introduces Blazor Grid data export functionality for any supported server-side data/Server Mode sources (GridDevExtremeDataSource, or CustomDataSource). Remote data can be exported to XLS, XLSX, and CSV formats.

The DevExpress Blazor Grid can now fetch records from a remote data source to/from the exported document. While fetching records, the Grid displays a loading indicator. To avoid flickering, the indicator is displayed only during estimated fetch time. For more information on this feature, refer to the following help topic: Data Export.

To explore this feature in greater detail, download a sample project here.

New Cell Editor Appearance

In-place editors in the filter row, edit row, and edit cells of the DevExpress Blazor Grid ship with a new improved look/feel - and automatically display validation icons, when required. The appearance of grid cells is now consistent in both display and edit modes.

Built-in Value Posting

We added the following new method to EditModelSaving event arguments: CopyChangesToDataItem. This method allows you to copy all changes made to the edit model during editing. Complex field values can be copied as well.

The following v23.2 code snippet...

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) { 
    var editModel = (EmployeeEditModel)e.EditModel; 
    if (dataItem != null) { 
        dataItem.FirstName = editModel.FirstName; 
        dataItem.LastName = editModel.LastName; 
        dataItem.Title = editModel.Title; 
        dataItem.HireDate = editModel.HireDate; 
    } 
 }

... can now be replaced with a shorter version:

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) { 
    var editModel = (EmployeeEditModel)e.EditModel; 
    if (dataItem != null) { 
        e.CopyChangesToDataItem(); 
    } 
}

The Tab key now navigates between all Grid cells regardless of a cell editor's active state. Users can also leave the table area by pressing Ctrl + Up or Ctrl + Down (Alt + Up or Alt + Down on Mac).

Charts

Annotations

The new Blazor DxChartAnnotation object allows you to create chart annotations — comments that contain information about chart content. You can populate annotations with image or text content. You can also anchor annotations to chart elements (series points or axes) or position annotations based on pixel coordinates. DevExpress Blazor Chart components also allow you to customize annotations as needed — you can configure annotation borders and shadows, image and text settings.

Error Bars

The new DxChartSeriesValueErrorBar object allows you to configure error bars (to indicate measurement precision or uncertainty). They display a possible value range next to a series point. Error bars can display fixed values or percentages, statistical function values, or error values obtained from data source fields.

Strips

Our new Blazor DxChartAxisStrip object allows you to create and configure axis strips. You can use a strip to highlight a range between two axis values or an area above/below a value. These highlighted areas help users determine whether a point falls in or out of a predefined range. You can also add a DxChartAxisStripLabel object to strip markup to display and configure strip labels.

API Enhancements

PieChart settings:

SegmentDirection - Specifies the direction in which the chart arranges series slices.
StartAngle - Specifies the angle at which the chart positions the first series slice.

Axis settings:

WorkdaysOnly - Specifies whether the chart displays only workdays on the axis.
WorkWeek - Specifies weekdays DxChart treats as workdays.
WorkDates - Specifies dates DxChart treats as workdays.
Holidays - Specifies dates DxChart marks as holidays.

Axis Range settings:

Length - Specifies range length.
MinVisualRangeLength - Specifies the minimum length of the visual range.
VisualRangeUpdateMode - Specifies how the visual range behaves if new points are added to the data source.

Rich Text Editor

Table API

Our new Blazor Rich Text Editor Table API allows you to modify table layout, decoration, and structure at runtime.

var table = await documentAPI.Tables.CreateAsync(0, columnCount, rowCount);
await table.ChangePropertiesAsync((properties => {
    properties.AutoFit = false;
    properties.Style = "Grid Table 5 Dark Accent 1";
    properties.Width = new TableWidth { Type = TableWidthType.Twips, Value = 9000 };
    properties.TableStyleOptions = TableStyleOptions.TotalRow | TableStyleOptions.HeaderRow;
}));

v24.1 introduces extended UI customization options for the DevExpress Blazor Rich Text Editor. You can now customize the component's context menu and associated sub-menus. Handle the CustomizeContextMenu event to:

Add or remove built-in menu items
Add custom menu items
Customize item appearance/behavior.

With v24.1, you can also control context menu visibility using the ContextMenuEnabled property.

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu /> 

@code { 
    void OnCustomizeContextMenu(IContextMenuItemCollection items) { 
        if (selection.Intervals[0].Length > 0) { 
            var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]); 
            textToSearch = span.Text.Trim(); 
        } 
        else 
            textToSearch = null; 
        
        var searchItem = items.AddCustomItem(0, "Google Search...", async () => { 
            var url = $"https://www.google.com/search?q={HttpUtility.UrlEncode(textToSearch)}"; 
            await JSRuntime.InvokeVoidAsync("open", url, "_blank"); 
        }); 
        searchItem.Enabled = !string.IsNullOrEmpty(textToSearch); 
        searchItem.IconCssClass = "search-icon"; 
        items.Remove(RichEditContextMenuItemNames.CutSelection); 
        items.Remove(RichEditContextMenuItemNames.CopySelection); 
        items.Remove(RichEditContextMenuItemNames.Paste); 
        var clipboardItem = items.AddCustomItem(1, "Clipboard"); 
        clipboardItem.BeginGroup = true;
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
    }
}

To explore the capabilities of the EAP-version of the DevExpress Rich Text Editor control, simply access our locally installed Blazor demos and proceed to Rich Text Editor → Context Menu Customization.

Scheduler

Recurrence Form Customization

v24.1 ships with an enhanced Scheduler AppointmentFormShowing. It now allows you to customize recurrence options for both Appointment and Recurrence forms. For instance, you can modify the list of items available in the Appointment form’s Repeat section as needs dictate:

...Or modify the list of repeat end items and weekday list in the Recurrence form:

The following code snippet customizes the Scheduler's recurrence options.

<DxScheduler ...  AppointmentFormShowing="OnAppointmentFormShowing"/> 

@code {
    void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo.RepeatItems = new List<SchedulerRecurrenceType>() {
            SchedulerRecurrenceType.Yearly,
            SchedulerRecurrenceType.Weekly,
            SchedulerRecurrenceType.Never
        };
    
        args.FormInfo.RecurrenceFormInfo.RepeatEndItems = new List<SchedulerRecurrenceRange>() {
            SchedulerRecurrenceRange.OccurrenceCount,
            SchedulerRecurrenceRange.EndByDate
        };
        
        args.FormInfo.RecurrenceFormInfo.WeekDayItems.Remove(SchedulerWeekDays.WeekendDays);
    }
}

Built-in Scroll Bars

The DevExpress Blazor Scheduler component automatically displays a scroll bar (for all supported view types) when cells don't fit within control boundaries/size. To specify Scheduler boundaries/size, modify width/height parameters using CSS:

<style>
    .my-scheduler {
        height: 600px;
    }
</style>
 
<DxScheduler ... CssClass="my-scheduler" />

API Enhancements

You can now specify the minimum width of a day cell in Day, Week, and Work Week views. Pass the integer value to the CellMinWidth property to set cell width in pixels.

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to share your v24.1 EAP-related feedback in the form below:

Blazor Grid — Batch Editing with Entity Framework Core

Svetlana Mikheeva (DevExpress) — Thu, 29 Feb 2024 11:00:00 GMT

If you are using the DevExpress Blazor Grid with Entity Framework Core and are interested in batch data editing, we recently published a GitHub example that incorporates batch data editing within the DevExpress Blazor Grid using Entity Framework Core.

Your browser does not support the video tag.

The example uses DbContext to obtain and update Blazor Grid data. When a user creates a new row or modifies/deletes an existing row, a DbContext instance tracks changes. End users can press Save to save all changes or press Cancel to discard accumulated changes. The CustomizeElement event handler identifies and highlights modified cells.

Use the following link to learn more and download our new Grid sample: DevExpress Blazor Grid Batch Edit GitHub Example.

Your Feedback Counts

Please take a moment to respond to the following survey question.

Blazor — Accessibility Enhancements and Options

Svetlana Nikulina (DevExpress) — Tue, 27 Feb 2024 10:00:00 GMT

In our last major update (v23.2), we modified element structure to improve screen reader compatibility, added alternate text descriptions, and WAI-ARIA roles/attributes for the following DevExpress Blazor UI components:

Grid
Data Editors
TreeView
Toolbar
Menu and Context Menu

We also introduced keyboard navigation and shortcuts for the following Blazor UI components:

Grid
Calendar
Toolbar
Menu
Context Menu

These accessibility-related capabilities are available "out-of-the-box." You can also extend accessibility in code. For instance, you can specify available descriptions for individual editors and control inner elements.

To learn more, please refer to the following help topic: Accessibility documentation.

Accessible Labels for Editors

Due to app design, editors within your app may not require a label. This, however, could lead to warnings during accessibility assessment and make it harder for users who reply upon screen readers. You can add a hidden label that is readable by screen reader software but not displayed on the page to address this use case. Use one of the following options to introduce this behavior to your DevExpress-powered Blazor app:

Create a separate label to add accessible information to an editor.

<label for="label1" style="display: none">Text</label>  
<DxTextBox InputId="label1"/>

Apply aria-label attribute directly to the editor.
```
<DxTextBox aria-label="Text" />
```

In both instances, the editor will render the input element with the specified aria-label attribute - one that can be read and pronounced by screen readers.

<div ... >
    <div ... >
        <div>
            <input aria-label="Text" ... >
        </div>
    </div>
</div>

Accessible Descriptions for Control Inner Elements

With localizable strings, text within control inner elements (such as buttons and our Blazor Grid’s search box) can be modified.

For example, the DxBlazorStringId.Grid_SearchBoxNullText property can be set to Search... (to modify null text used in the search field).

In our v23.2 release cycle, we created localization strings designed for use with assistive technology tools. If your customers use assistive technologies, you can offer additional information to help improve overall usability. The naming pattern for these strings is A11y_{string_name}.

In the following code snippet, the static XtraLocalizer object is used to provide null text and an accessible description of the search box. Though this description does not change control appearance, it does impact how individuals with visual impairments are able to process on-screen information.

protected override async Task OnInitializedAsync() {
    XtraLocalizer.QueryLocalizedString += new EventHandler(XtraLocalizer_QueryLocalizedString);
}

static private void XtraLocalizer_QueryLocalizedString(object sender, XtraLocalizer.QueryLocalizedStringEventArgs e) {
    if (e.StringIDType == typeof(DxBlazorStringId)) {
        if ((DxBlazorStringId)e.StringID == DxBlazorStringId.Grid_SearchBoxNullText)
            e.Value = "Search...";
        if ((DxBlazorStringId)e.StringID == DxBlazorStringId.A11y_Grid_SearchBox)
            e.Value = "Enter search criteria. Use the space key to enter multiple search values.";
}

What's Next

To learn more about our next major update (v24.1) and accessibility-related features we expect to release in June, please refer to the following blog post: Roadmap (24.1).

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to answer the following survey questions and help us shape accessibility-related development strategies for 2024:

ASP.NET Team Blog

DevExpress Blazor AI Chat — AI Assistants for Report Viewer and Grid

Review our GitHub Example

Expanding AI Integration to WinForms and WPF

Share Your Feedback

Blazor — June 2025 Roadmap (v25.1)

Live Roadmap Updates

Legacy Data Grid, ComboBox, Tag Box, and List Box Removal

Focus on Performance and Stability

.NET Upgrade Assistant Integration for Project Upgrades

Fluent Theme — Official Release

Built-in and Custom Accent Colors

Different Icons for Every Size Mode

Updated Fluent UI Kit

Blazor Package Size Optimization

App Showcase Demo (Discussion)

New Project Template Gallery

Blazor Pivot Table — Official Release (Discussion)

Field Reordering

Filter Data

Blazor Ribbon — Official Release

Blazor AI Chat

Prompt Suggestions

File Attachments

API to Reuse an Existing OpenAI Assistant

Blazor Grid & TreeList (Discussion)

PDF Export

Blazor TreeList

Search

Blazor Data Editors

Blazor Date Edit — Month/Year Picker View

Blazor List Box — Select All

Blazor Date Edit & Time Edit — Custom Increment Step

Blazor Map

Azure Maps Support

Blazor PDF Viewer

Set Download Name

Blazor Rich Text Editor

Zoom

Blazor Scheduler (Discussion)

Toolbar Customization

Resizing and Dragging for Appointment Form

Appointment Form Customization

Appointment Popup Performance Enhancements

UI/UX Enhancements

Blazor Reporting

Your Feedback Matters

ASP.NET Bootstrap Controls – Bootstrap XSS Vulnerability Addressed, Support for Bootstrap v5.3.3 and Dark Mode

New Bootstrap Version in Project Templates: XSS Vulnerability Addressed

Upgrade Your Existing Project to v5

Dark Mode Support

What about Blazor components?

Have Questions?

How to Use the DevExpress Blazor Drawer Component in Static SSR Mode

The First Strategy: Add Query Params to Control Drawer Visibility

The Second Strategy: Specify CSS Rules to Control Drawer Visibility

Blazor Component Suite — Early Access Preview (v24.2)

.NET 9 Support

.NET 8, .NET Framework 4.6.2, Visual Studio 2019 Will Be Minimally Supported Versions for DevExpress Libraries (v24.2+)

New Blazor AI Chat Component

New Blazor Sankey

New Buttons — DropDown Button and Split Button

New Blazor Search Box

Keyboard Support

Blazor TreeList

Editing

Export to Excel

New Filter Mode — Nodes

Self-Reference Data Binding Enhancements

Expand All Nodes Automatically

Blazor Data Editors

List Box — Search

Validation API

Blazor Tabs

Close Tab Button

Blazor TreeView

Performance Enhancements

Blazor Charts

SSR Support

Your Feedback Matters