In this blog post, we'll look at major features we expect to ship with v24.2. These features apply to both DevExtreme JavaScript (Angular, React, Vue, jQuery) and DevExtreme-based ASP.NET MVC/Core Controls. To share feedback, please respond to the survey questions embedded within this post or submit a support ticket via the DevExpress Support Center. We will be happy to follow up.
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.
Angular
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',
});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.
React
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>
);
}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.
Vue
Support TypeScript IDE Assistance
With v24.2, we will support TypeScript IDE assistance (e.g., IntelliSense) for Vue-based projects.
Import Enhancements
Single Entry-Point For All Types Import For Each Framework
For modular projects, you must import from two packages - devextreme and a framework package (devextreme-react/devextreme-angular/devextreme-vue).
v24.2 will simplify this process and all required types will be available for import from your preferable framework package.
Angular
// 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';React
// Before
import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid';
import DataSource from 'devextreme/data/data_source';
// After
import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid';
import { DataSource } from 'devextreme-react/common/data';Vue
// Before
import { DxDataGrid, DxDataGridTypes } from 'devextreme-vue/data-grid';
import DataSource from 'devextreme/data/data_source';
// After
import { DxDataGrid, DxDataGridTypes } from 'devextreme-vue/data-grid';
import { DataSource } from 'devextreme-vue/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.
.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.