DevExtreme Complete 23.1

New DateRangeBox Component

• The DateRangeBox component for Angular, React, Vue, and jQuery allows you to select a date range. Features include:
  • Masked Input.
  • Popup and Calendar Customization.
  • Input Label and Styling Modes.
  • Value Mode.
  • Input Validation.

Data Grid and Tree List

• Column Chooser Customization:
  • The new selection property allows you to configure selection options within the Column Chooser window. Available options include:
    • Recursive selection.
    • Select all.
    • Select a column by clicking its label.
  • You can now specify a search configuration object to customize search within the Column Chooser.
  • The new position property allows you to specify the display location of the Column Chooser.

Data Filtering - UI Customization

• Header Filter Customization in DataGrid, PivotGrid, TreeList, Gantt - You can now customize search options and the appearance of the search box in column header filters.

Data Visualization

• Charts - Сolor Gradients and Patterns - You can now customize styles and apply gradients, patterns, and images to DevExpress Charts.
• Charts - Customize Label Position in Series - The new shift(x,y) method allows you to display series labels at a specified offset from their default position.
• Gauge - Display Custom SVG Content - Use the new CenterTemplate method to display custom SVG content inside the Gauge component.
• BarGauge - Support 'Shift' Mode to Address Overlapping Labels - If BarGauge displays multiple values ​​next to each other, corresponding labels may overlap. You can now use the ResolveLabelOverlapping method to specify how the BarGauge component modifies the position or visibility of labels. Available options include:
  • Shift: In shift mode, the BarGauge automatically shifts labels when necessary.
  • Hide.
  • None.

UI Components

• Overlay Components - Native Scrolling - The Popup, Popover, and Tooltip components now support native scrolling, which improves usability on mobile devices. If content height is greater than the height of the overlay component, the component displays the browser's native scrollbar. With this new enhancement, you do not need to wrap content into the ScrollView component.
• TreeView - Display Custom Expand/Collapse Icons - TreeView nodes can now display custom expand/collapse icons. Use the CollapseIcon and ExpandIcon methods to specify node icons. You can load icons from URLs, specify icons in CSS class (if working with external libraries), or display default icons.
• List - Select Items on Click - The new SelectByClick method specifies whether to select an item when the user clicks its caption.
• ColorBox - Hexadecimal 8-digit RGBA Format Support - You can now specify colors in hexadecimal 8-digit RGBA format. The ColorBox component accepts the following color formats:
  • 4- and 8-digit (#F00F, #FF0000FF).
  • 3- and 6-digit Hexadecimal (#F00, #FF0000).
  • RGB (rgb(255, 0, 0)).
  • RGBA (rgba(255, 0, 0, 1)).
  • Color Names.
• Menu - Add the 'url' Option for Items - Added a new URL method for Menu items. Use the LinkAttr method to specify link attributes.
• Improved Calendar Design - UI/UX enhancements include:
  • 'Prev' and 'Next' arrows are now fully customizable Button components.
  • Visually enhanced selection in different calendar views.
  • The week number column has now a completely new look and feel.
  • Improved adaptivity allows you to deliver elegant and responsive web applications for desktops, tablets, and phones alike.
• Floating Action Button - Compact Mode Support - Added a compact mode to the Floating Action Button component.

UI Template Gallery

• Scheduler View - The Scheduler View allows you to deliver scheduling/information management solutions with absolute ease. It integrates the fully customizable Scheduler and Calendar components. Features include:
  • Day / Work Week / Month / Agenda Views.
  • Create and Edit Events (Appointments).
  • Show/Hide Calendars.
• User Profile View - Use the DevExtreme Form component to create a user profile view that allows you to edit and save user information.
• Light and Dark Theme Switcher - The UI Template Gallery application ships with a new theme switcher. Use it to switch between light and dark themes.
• Authentication Forms - Improved the functionality and design of the "Sign-In" and "Change Password" forms. Added a show password option and "Login with Google/Microsoft" buttons.

Data Layer

• DataSource - Sort and Filter by Locale - The DataSource can now sort and filter data by locale with special characters (for example, symbols with diacritics).

Accessibility

• Extended the following accessibility-related capabilities:
  • Focus disabled UI elements - Switching focus between accessible and disabled (unavailable) UI elements in the components now complies with the WAI-ARIA standard. Screen readers can now report a disabled element when the user focuses on it. Any other interaction with disabled UI elements is not allowed.
  • Keyboard navigation in TreeView - Improved the tab navigation (Tab key) between item checkboxes and 'selectAll' checkbox.
  • Keyboard navigation in Calendar - Users can now focus the Today button and press Enter to navigate to the today date. Enable the showTodayButton setting to display the Today button within the calendar.
  • Global rework of aria-*attributes - This enhancement allowed us to better support screen readers in all UI components.
  • Tabs and TabPanel - Design improvements in Material and Generic themes - Added new visual states for the Tabs and Tab Panel components. And also improved existing states: hover, active, disabled, focused, and selected.
  • Charts - Pattern and Image fill - With this new customization option, you can edit styles, apply images and SVG patterns to DevExpress Charts, making them accessibile to visually impaired people.
• Improved the documentation of the DataGrid, TreeList, and dropdown editors - The documentation now includes help topics about accessibility support. Each help topic includes a table with the features and standards supported by the component. Lighthouse, WAVE, and Axe accessibility tools are used to test the components and display results in the table.

Security

• Content Security Policy (CSP) Support - The DevExtreme UI library now supports Content Security Policy (CSP) integration and introduces advanced security features to help you detect and mitigate certain types of security risks, including Cross-Site Scripting (XSS) and data injection attacks.

TypeScript Enhancements

• React component props now fully support types. TypeScript hints on errors in code, and IntelliSense to avoid them.
• You can now export all required types from framework specific packages. In previous versions, you had to import certain types from a separate DevExtreme package, while other types had to be imported from specific framework packages such as devextreme-angular.
• The documentation now includes over 500 topics related to types.