Released: Dec 12, 2024

24.2 での更新項目

機能

New Chat Component

• The new DevExtreme Chat Component (v24.2) allows you to address a variety of usage scenarios and introduce real-time communication support in your next DevExpress-powered web app.
• AI and Chatbot Integration
  • With the DevExtreme Chat UI component, you can incorporate AI-powered app assistants, implement Copilot-inspired user interfaces, and much more. To introduce these capabilities to your next DevExtreme-powered web app, simply set up appropriate AI services on the backend (Microsoft/OpenAI - GPT, Google - Gemini, self-hosted models via Ollama, or other AI services).
• Manage Users
  • A DevExtreme Chat instance contains information about its owner in the user property. Owner messages align to the right (or left in RTL mode), without displaying the owner's username and avatar.
  • Each message includes information about the sender (item.author), and includes name, avatar, and alt avatar text. If no avatar is set, the user's initials are displayed instead. Users without a name are marked as "Unknown User".
• Handle Events
  • Entering a message triggers the messageEntered event. Use the event handler to perform message post processing (like deleting obscene words, displaying the message in a message feed, and sending the message to the server for storage).
  • Start typing to raise typingStart, and stop typing for typingEnd. By using these event handlers, you can manage the typingUsers array (it shows which users are typing in the chat UI).
• Customize UI Elements
  • Control date and time visibility with showDayHeaders and showMessageTimestamp. Modify associated formats with dayHeaderFormat and messageTimestampFormat.

New Pagination Component

• v24.2 ships with a new Pagination UI component. Key features and capabilities include:
  • Page Navigator: Controls movement between individual pages. You can display/hide navigation buttons as requirements dictate.
  • Page Size Selector: Controls the number of records that appear on each page. You can set the allowedPageSizes property to a numbers array that specify available page sizes.
  • Page Information: Displays the current page number and total records. You can specify pageIndex to set the initially opened page.
  • Responsive Design: Component adapts its layout based on available screen size. Supports full, compact, and adaptive modes.
  • Right-to-Left support.
  • Accessibility and Keyboard Navigation support: Fully accessible with integrated keyboard navigation support.

DataGrid and TreeList

• Sticky Columns
  • Both the DevExtreme DataGrid and TreeList ship with fixed column support (allowing you to fix columns to a table's edge). Prior to the availability of advanced CSS positioning tools, the fixed column setup used two separate tables. In v24.2, DevExpress overhauled this mechanism: fixed columns are now integrated into the main table.
  • This update also introduces a new value for the fixedPosition property: sticky. Sticky columns behave initially as regular columns. When scrolling horizontally, they adhere to the left and right edges of the table upon reaching them. This enhances usability by keeping key information visible at all times.

UI/UX and API

• 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.
    • v24.2 includes a new onSelectionChanging event for the aforementioned UI components. The event helps track selection changes more effectively and includes a cancel property (Boolean or JS Promise).
    • The primary purpose of the onSelectionChanging event is to enable tab/item switching under specific usage conditions. If a condition is not met, you can prevent the switch using the cancel property.
• TabPanel/MultiView - Item Visibility Option
  • The DevExtreme TabPanel and MultiView include a new visible property for individual items. This feature allows you to manage whether an item is visible at runtime.
• DataSource - Case Sensitive Filtering
  • In v23.1, DevExpress released langParams for DataSource. This property can be used to include language-specific parameters for sorting and filtering operations performed on a client. This update includes case sensitivity for the langParams options. You can now introduce case-aware filtering when using DevExtreme UI components with DataSource support (such as DataGrid).
• HTML Editor - Advanced Format Conversion
  • Previously, the DevExtreme HTML Editor included basic HTML and Markdown conversion support (via showdown/turndown dependencies). With v24.2, DevExpress have removed this capability and added a converter option for custom conversions. This update allows greater control/options for HTML Editor-related formatting operations. You can even add support for other formats such as YAML. You will only need a converter from and to HTML.

Maps

• Azure Maps Support
  • Microsoft discontinued availability of Bing Maps for Enterprise and associated APIs. Azure Maps will be Microsoft's single unified enterprise mapping platform moving forward. Accordingly, DevExtreme Maps now supports Azure Maps (a new map provider).
  • DevExpress recommend use of a supported map provider (either 'azure', 'google', or 'googleStatic') in your DevExtreme-powered solution.
• Advanced Google Markers and mapID Support
  • DevExtreme Maps now supports advanced Google markers. DevExpress also published a new providerConfig configuration object that contains settings specific to 'google' and 'googleStatic' providers. For instance, you can now use the Google Maps mapID option to customize your Map by setting it in the providerConfig.mapId.

Import Enhancements

• Single Entry-Point for All Types Import
  • Previously, for modular projects, you had to import from two packages - devextreme and a framework package (devextreme-react/devextreme-angular/devextreme-vue). v24.2 simplifies this process, and all required types are available for import from your preferable framework package.

Accessibility

• DevExtreme Scheduler ships with enhanced contrast and keyboard navigation support. It now includes aria-labels for agenda appointments, month view, and recurrence icons.
• In addition, other DevExtreme UI components such as DataGrid, TreeList, FilterBuilder, HTML Editor, Calendar, Menu, List and ProgressBar were enhanced as follows:
  • Screen readers can now indicate whether a TreeList node is in an expanded or collapsed state.
  • Screen readers can now pronounce selected dates when DevExtreme Calendar is in multi select mode.
  • DataGrid and TreeList ColumnChooser and HeaderFilters are now visible when receiving focus. The focus is looped now.
  • Focus order for a Lookup was modified so that elements are not obscured by a drop-down field.
  • HTML Editor Toolbar button states are now pronounced properly.
  • You can now collapse and expand List groups with keyboard navigation.
• Application Templates
  • DevExpress introduced the following changes to the application templates:
    • Newer and more modern design.
    • Light/dark theme switcher.
    • Templates are created using the newest Fluent theme by default.

Angular

• Service for Popup Open Operations
  • Previously, to define a Popup, it was necessary to add the Popup to markup and define a template for its content. The visible property controlled Popup visibility. The use of services that display popups is a common practice in Angular libraries. DevExtreme Popup component now includes DxPopupService which allows you to open a Popup and initialize its content using an open method. The open method accepts a component to be displayed and Popup options.
• New Configuration Components
  • DevExpress have launched a new set of devextreme-angular configuration components (these can be used independently). You can access these new components by appending the parent component's name after the prefix. For example, dxo-editing in DataGrid becomes dxo-data-grid-editing, and dxi-column changes to dxi-data-grid-column, etc.
• Added support for Angular 19.

React

• Custom Configuration Components
  • You can now extract parts of a component's configuration in a separate React component and reuse these settings across multiple DevExtreme components by simply nesting this custom component.
• Added support for React 19 RC.

Vue

• Support TypeScript IDE Assistance
  • DevExtreme Vue component props fully support types. The components also support TypeScript IDE assistance (IntelliSense) for Vue-based projects.
• Added support for jQuery 4 Beta.

ASP.NET Core

• .NET Framework 4.6.2 and .NET 8 Support
  • DevExpress ASP.NET Core component libraries no longer support .NET 6/7 and .NET Framework 4.5.2, 4.6 and 4.6.1. DevExpress ASP.NET Core also requires .NET 8 and MVC5 - .NET Framework 4.6.2 respectively.
  • For .NET Core/.NET 8-based products, Visual Studio 2022 is required. Visual Studio 2019 is the minimally supported IDE version for MVC5.
• .NET 9 Support
  • DevExtreme UI libraries/components now support .NET 9.
• Newtonsoft.Json has been replaced with System.Text.Json
  • DevExtreme ASP.NET Core/MVC controls (v24.2) now use System.Text.Json library to serialize scripts and deserialize payloads.
• Project Template Enhancements
  • DevExpress introduced a Fluent theme to ASP.NET Core project templates, and enhanced the current Material theme design.
• Rich Text Editor IF Field Support
  • The Rich Text Editor now supports the IF field and allows you to compare two values and insert a text string related to the comparison.