Our next major release (v24.2) is a couple of months away. In this post, I'll detail new features included in our Early Access Preview (EAP) build (for active DevExpress Universal or DXperience subscribers). As always, if you encounter issues with our EAP build, feel free to submit a support ticket via the DevExpress Support Center or use the embedded survey to send us feature/product-related feedback.
Installation
If you own an active Universal or DXperience subscription, you can download our EAP build via the DevExpress DownloadManager or appropriate NuGet packages.
To begin using the DevExtreme v24.2 EAP build, simply install target framework related NPM packages (marked with the 24.2-next tag). Use one of the following commands to proceed:
npm install devextreme@24.2-next --save-exact
npm install devextreme-angular@24.2-next --save-exact // Angular installation
npm install devextreme-react@24.2-next --save-exact // React installation
npm install devextreme-vue@24.2-next --save-exact // Vue installationEarly 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.
Early Access Preview build is considered pre-release software, and you will see a W0022 error in your browser console.
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 two months.
New Chat Component
Our Early Access Preview ships with the first iteration of the DevExtreme JavaScript Chat component (allowing you to introduce peer-to-peer/chat-bot support within your DevExtreme-powered web application).
.png)
Key features included in the DevExtreme Chat component EAP build include:
- Accept and report new messages.
- Custom avatar support (initials used by default).
- Sends messages using the "Send" button or Enter key.
Note: DevExtreme Chat is a client side library. An independent backend solution will be necessary. For an example of DevExtreme Chat and AI integration, refer to the DevExpress Reporting EAP blog post.
Select one of the following supported dev frameworks to explore the capabilities of the new DevExtreme JavaScript Chat component:
Angular | React | Vue | jQuery
Data Grid/Tree List — Sticky Columns
The DevExtreme DataGrid and TreeList ship with fixed column support (as you know, fixed columns allow you to pin a column to the right or left side of a table/tree hierarchy).
In this EAP, a new (sticky) value is available for the fixedColumn property. Sticky columns are initially fixed but move with the table once scrolled to a specific position.
Note: This feature is still under development, and some DataGrid/TreeList features (such as resizing, reordering, or data grouping) may not work as expected.
We also redesigned our original “fixed column” engine (we now offer advanced CSS positioning).
Select one of the following supported dev frameworks to explore the capabilities of our new Sticky Columns feature:
DataGrid
Angular | React | Vue | jQuery
TreeList
Angular | React | Vue | jQuery
Tabs/TabPanel/List — onSelectionChanging Event
DevExtreme Tabs, TabPanel, and List share a common feature: selectable items.
Currently, these components include an onSelectionChanged event that triggers once selections are finalized and the selectedItems option updates. This timing can make it difficult to control selection changes based on user interaction.
This EAP includes a new onSelectionChanging event for the aforementioned component libraries. The event helps track selection changes more effectively (for example, you can now prevent selection) and includes a cancel property, which can be Boolean or a JS Promise.
.gif)
A common usage scenario is asynchronous validation for The Form component within an open tab. When attempting to switch to a different tab (and depending on validation results), our customers wanted the ability to either prevent tab switching or allow it. With our new onSelectionChanging event and an API that supports promises, this scenario can be implemented quite easily.
Select one of the following supported dev frameworks to explore the capabilities of the new onSelectionChanging event feature:
Angular | React | Vue | jQuery
DataSource — Case Sensitive Filtering
DataSource can sort and filter data by locale, including special characters such symbols with diacritics (by using langParams options).
In this EAP, we added case sensitivity within langParams options. As you can see in the image below, you can now introduce case-aware filtering within DevExtreme UI components like our DataGrid.
This EAP also refines filtering for various locales (the filter is now more precise).
Select one of the following supported dev frameworks to explore the capabilities of our new Case Sensitive Filtering feature:
Angular | React | Vue | jQuery
Angular — New Configuration Components
This EAP includes new devextreme-angular configuration components.
As you may know, DevExtreme Splitter uses a generic dxi-item configuration component. This same dxi-item appears in components such as Form and TabPanel (causing potential confusion, especially with IntelliSense).
Our new components are specific to each parent. For instance, Splitter now also uses dxi-splitter-item, which only includes properties relevant to Splitter.
Similarly, other DevExtreme components use new configuration components that include parent name.
Note: You can either use new components or the previous, but not both.
Angular — Service for Popup Open Operations
In previous builds, you had to use a template to specify Popup content. This EAP introduces a new approach for this specific requirement. Use DxPopupService and its open method as necessary (this method takes a content component and a Popup configuration object).
import { DxPopupService } from “devextreme-angular/ui/popup”;
// ...
constructor(private popupService: DxPopupService)
// ...
popupService.open(ContentComponent, { showCloseButton: true }) The open method returns both Popup and contentComponent instances. In the following example, these instances are used to close the Popup programmatically:
.NET
.NET 9 Support
The DevExtreme product line now supports NET 9 RC1 .
.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.