DevExtreme Angular Roadmap

New Components

Chat Component

Our next major release (v24.2) will include a Chat component, a must-have UI element for apps that require real-time communication support. Here’s a sneak peek at what you can expect from our Chat component:

• Human-to-Human Interaction: Enable user conversations with a chat interface for one-on-one or multi-account communication. Ideal for customer support, social networking, and/or internal collaboration.
• AI and Chatbot Integration: Enhance your app’s user experience with AI services and chatbots. Automate responses, deliver immediate support services, and boost engagement with intelligent interactions.
• Accessibility and Keyboard Navigation: Our commitment to accessibility ensures that the Chat component will be fully navigable via keyboard, making it intuitive/usable for everyone.

Pagination Component

DevExtreme DataGrid and TreeList ship with built-in paging support. We expect to release Pagination as a separate component to simplify data navigation/improve browsing. This component will allow users to navigate extensive datasets by dividing them into individual pages.

Display mode: “full”

Display mode: “compact”

Primary features will include:

• Page Navigator: Built-in controls allow users move between pages. Navigation buttons can be displayed or hidden.
• Page Size Selector: Set the number of records per page and configure page size selection elements (display/hide the page size selector and customize page size).
• Page Information: Display current page number and total record count. Custom text can be set for page information.
• Responsive Design: Pagination will support full, compact, and adaptive display modes. In compact mode, Pagination will change the appearance of the page navigator and page selector to use screen space more efficiently. In adaptive mode, Pagination will automatically switch between full and compact based on content width.
• Right-to-Left Support: Suitable for applications requiring internationalization.
• Accessibility and Keyboard Navigation: Pagination will be fully accessible with keyboard navigation support

Data Grid / Tree List — Sticky Columns

In our next update, fixed column support will undergo a complete redesign. Designed before advanced CSS positioning tools were available, our current solution relies on two independent tables: one for fixed columns and another for the primary table. Synchronization between these tables is managed through code, which can fail in rare instances.

In addition to the basic redesign, v24.2 will include a new sticky columns option. Sticky columns remain static initially but start scrolling when they reach their position. Once scrolling moves past this point, they reattach to a different side of the table. This feature improves usability by displaying important columns in a specific view (ensuring continuous access to critical information).

Maps

Support Azure Maps

As you know, Microsoft recently announced that Bing Maps for Enterprise and associated APIs will be discontinued. Azure Maps will be Microsoft’s single unified enterprise mapping platform moving forward.

Accordingly, we expect to add an Azure Map provider in our v24.2 release cycle.

Advanced Google Markers and mapID Support

Google.maps.Marker was deprecated in February 2024. DevExtreme will support advanced Google markers in our Map component and publish a new mapID option (allowing you to use the Google Maps mapID option).

UI/UX and API Enhancements

Collection Components — onSelectionChanging Event

The DevExtreme product line includes several collection components (such as Accordion, List, TreeView, TabPanel, etc.). These components share a common feature: they contain items. Presently, many of these components include an onSelectionChanged event that triggers after all selections are final and the selectedItems option updates. This timing can make it difficult to prevent selection changes based on user interactions.

In our v24.2 release cycle, a new onSelectionChanging event will be available for collection components. This event, which includes a cancel property, will trigger before the selectedItems option updates. This addition simplifies the management of item selections, enabling you to handle user actions more effectively.

TabPanel/MultiView — Item Visibility Option

The DevExtreme TabPanel and MultiView will include a visible property for individual items. This new feature will offer control over collection item visibility settings and allow you to control item visibility at runtime.

DataSource — Case Sensitive Filtering

In June 2023, we released langParams for DataSource. This property can be used to include language-specific parameters for sorting and filtering operations performed on a client. For example, locale settings and collator option configurations are available.

In our next major update, you will be able to configure case sensitivity for sort and filtering operations in DataSource. For example, when the langParams option is set to langParams.collatorOptions.sensivity=case and user inputs "A" for filtering, records containing the character "A" will be located, while records with the character "a" will be ignored.

Method to Specify Popup Content

Currently, a template can be used to set content for the DevExtreme Popup component.

With v24.2, Angular users will be able to specify content for Popup elements in a more traditional manner. You will be able to define custom components directly in method arguments used to open Popup.

popup.open(CustomComponent, {
    height: '400px',
    width: '600px',
});

Custom Configuration Components

The conventional approach for handling components in React is composition - where one component wraps another. This approach combines multiple components to create larger, more structured ones.

v24.2 will support component composition configuration for DevExtreme React components. For example, you will be able to wrap a DataGrid column into a custom component to reuse it:

const DynamicColumn = (props) => {
    return (<Column ... />)
}

function MyGrid(props) {
     return (
        <DataGrid ...>
            <DynamicColumn columns={props.columns} />
        </DataGrid>
     );
}

TypeScript Enhancements

Improved Configuration Component Typing

Props for some of the Angular configuration components lack strict typing. We will enhance the configuration component type definitions while working on internal TypeScript support.

Support TypeScript IDE Assistance

With v24.2, we will support TypeScript IDE assistance (e.g., IntelliSense) for Vue-based projects.

React 19 Support

We've tested our components, demo gallery, and responsive UI templates with React 19 RC and found no issues. As such, we expect to introduce React 19 support in our next major update.

Import Enhancements

Single Entry-Point For All Types Import For Each Framework

For modular projects, you must import from two packages - devextreme and devextreme-angular.

v24.2 will simplify this process and all required types will be available for import from your preferable framework package.

// Before
import {
    DxDataGridModule,
    DxDataGridTypes
} from 'devextreme-angular/ui/data-grid';
import DataSource from 'devextreme/data/data_source';
// After
import {
    DxDataGridModule,
    DxDataGridTypes
} from 'devextreme-angular/ui/data-grid';
import { DataSource } from 'devextreme-angular/common/data';

Accessibility

Continuing our commitment to accessibility support, v24.2 will resolve a range of accessibility issues affecting DevExtreme UI components. Our long-term goal is to address all limitations identified in our Voluntary Product Accessibility Template (VPAT) documents.

Application Template Enhancements

We expect to introduce the following enhancements to our application templates:

• Refresh design, Material theme.
• Introduce a Fluent theme.
• Give you the ability to switch between light and dark themes.

Before:

After:

.NET

.NET Framework 4.6.2 and .NET 8 Support

Once we release v24.2 (December 2024), DevExpress ASP.NET Core component libraries will no longer support .NET 6/7 and .NET Framework 4.5.2, 4.6 and 4.6.1. DevExpress ASP.NET Core will also require .NET 8 and .NET Framework 4.6.2 respectively.

With v24.2, Visual Studio 2019 will be the minimally supported IDE version. For .NET Core/.NET 8-based products, Visual Studio 2022 will be required.

To learn more, please review the following blog post: .NET and Visual Studio Support.

.NET 9 Support

We have started testing DevExtreme ASP.NET Core controls against .NET 9 previews. Once Microsoft officially releases .NET 9, we expect to introduce .NET 9 support for our v24.2 assemblies.