Released: Jun 13, 2024

24.1 での更新項目

機能

• New Splitter Component
  • The new Splitter component allows you to divide a page or section into multiple adjustable panes.
  • The Splitter component can be oriented either vertically or horizontally. Orientation affects the following pane-related properties (can be specified in pixels or percents):
    • size - Specifies initial width (horizontal orientation) or height (vertical) of the pane.
    • maxSize, minSize - Defines resizing limits for the pane.
    • collapsedSize - Specifies the size of a collapsible pane when collapsed.
  • Splitter panes can contain multiple content types, ranging from simple HTML to complex components. You can place HTML markup inside the item tag or use the following properties to populate panes with content:
    • itemTemplate - Defines a custom template for all panes.
    • template - Sets a custom template for each specific pane.
• UI/UX and API Enhancements
  • DropDownButton - Custom Button Template - With this release, you can replace the base button in DropDownButton with custom content (such as an avatar or multiline text).
  • Menu/ContextMenu - Item Scrolling - Submenus that exceed page size (in Menu or ContextMenu) can now be scrolled. You can use CSS stylesheets to customize submenus as needs dictate. In the Menu component, use the onSubmenuShowing function to configure scroll-related settings. For instance, you can restrict the size of the submenu when item count surpasses a specified limit.
  • Form - Group Caption Custom Content - The new Form groupItem.captionTemplate option enables custom content replacement for group captions.
  • HTML Editor - Spellcheck and CSP Support - The DevExtreme HTML Editor now uses spellcheck functionality across all supported browsers. This addition enhances text editing capabilities through real-time spelling correction/suggestion support. Previous versions required Content Security Policy (CSP) directives when passing markup with inline styles to the HTML Editor. The DevExtreme HTML Editor in this release fully supports CSP.
• Reduce JS Bundle Size - The DevExtreme bundle size has been reduced by making the following changes:
  • Code used by supported browsers is no longer transpiled.
  • Eliminated time zone data stored in the bundle and switched to internal browser time zone engine.
• New Angular DxHttpModule
  • Simplified Request Interception - Angular HttpClientModule is a module that simplifies HTTP requests. It supports request and response interceptors, which allows you to introduce capabilities such as authentication tokens or logging across all HTTP requests. With this release, these components have been transitioned from Ajax to the HttpClientModule. Simply import the DxHttpModule to activate this new functionality.
• Shadow DOM Support (CTP) - Shadow DOM represents one of three Web Components specifications, complemented by HTML templates and Custom Elements. Shadow DOM allows the attachment of a hidden, separate Document Object Model (DOM) to an element, termed the 'Shadow Host'. This hidden DOM, called the 'Shadow DOM', can contain additional nested Shadow Hosts, forming a structure known as a Shadow Tree. It's a direct method to create components with isolated CSS and JavaScript. Many everyday web interfaces use Shadow DOM (a feature available in all major browsers). This release introduces Shadow DOM support in Angular, React, and Vue as a Community Technology Preview (CTP).
• Accessibility
  • Accessibility-related enhancements in this release include NVDA support for improved keyboard navigation and pronunciation support across the following components:
    • Tabs.
    • TabPanel.
    • TagBox.
    • List.
    • DropDownButton.
    • Calendar.
    • DataGrid with Master-Detail.
  • DataGrid and TreeList now meet the Status Messages criterion.