;

DevExtreme Angular - What’s New in v23.2

Your Feedback Matters
We thank you for your continued support. Once you’ve reviewed the features/capabilities introduced in our v23.2 release cycle, please take a moment to complete our online survey. Your comments will help us refine our development plans for our v24.1 release set for release in 2024.

Look & Feel

New Fluent Theme

DevExtreme v23.2 ships with a new Microsoft Fluent inspired web theme.


Fluent Themes - DevExtreme, DevExpress

The theme includes the following capabilities:

  • Accessible components with contrast color support.
  • Two color schemes: Classic and SaaS.
  • Two size modes: Standard and Compact.
  • New icon package.

Fluent SaaS Light Theme - DevExtreme, DevExpress

New Fluent Theme Icons - DevExtreme, DevExpress

ThemeBuilder Enhancements

We introduced numerous enhancements to the DevExtreme ThemeBuilder tool. Enhancements include:


  • Integration of the new Fluent theme.
  • Advanced ThemeBuilder settings were expanded to incorporate all possible states of Button and ButtonGroup.
  • Added a new set of variables for editors.

ThemeBuilder with Fluent Theme - DevExtreme, DevExpress

Material Theme Enhancements


This release includes the following changes to Material theme:


  • To address accessibility-related issues, the disabled state for the Button component now includes a higher contrast color combination.
  • We updated the appearance of our ButtonGroup component to ensure consistency with Google's Material Design guidelines.
  • Different text editor (type) boxes are now the same height. Thanks to higher contrast color combinations, the content of label and placeholder elements are also accessible.
  • Multiple changes have been introduced within the DevExtreme Accordion component. The spin icon uses a higher contrast color combination. The component's overall style is more consistent with those outlined in Google's Material Design guidelines.
  • To avoid help text overlapping with nearby items, the validation message now uses a contrasting background.
  • Two icons were changed to make the overall icon set consistent.
  • We changed the Slider's tooltip to make it more consistent with Material guidelines.
  • The List component also better matches Material guidelines (no accent colors).
  • Our Form was improved to avoid vertical item misalignment between groups.
  • Our PivotFieldChooser includes full-fledged DevExtreme font icons (in previous versions, icons were SVG based)

Scheduler

Work Shift Support

In v23.2, the DevExtreme Scheduler introduces an offset display option, allowing you to configure enterprise work day offsets and accommodate work shift variations, time zones, and other related usage scenarios.


Work Shift Support - DevExtreme Scheduler, DevExpress

Demo

Calendar

Multi-Selection of Discrete Days


The new Calendar selectionMode option offers three modes: single, multiple, or range selection.


  • single - select a single date.
  • multiple - choose multiple dates.
  • range - select the first and last dates in a range.

Multi-Selection of Discrete Days - JS Calendar, DevExpress

You can set a single date or an array of dates as the initial value. You can also use the selectWeekOnClick option to allow selection of an entire week by clicking on associated week numbers.


Demo

Tabs & TabPanel

Vertical Tabs Orientation


For Tabs, we added a new orientation option that allows you to arrange tabs either horizontally or vertically.


Tabs Orientation Example - DevExpress

Tabs Orientation Example - DevExpress

Custom Tabs Position


For TabPanel, our new tabsPosition option allows you to locate tabs on the right, left, top, or bottom of the panel.


Custom Tabs Position - DevExtreme Tabs, DevExpress

Custom Icon Position


Both Tabs and TabPanel now include an iconPosition option, allowing you to define where icons are displayed within Tabs (start, end, top, or bottom position).


Custom Icon Position - DevExtreme Tabs, DevExpress

Secondary Styling Mode


You can now specify a styling mode for the active tab. The following styling modes are available:

  • primary - the width of the underline is fixed.
  • secondary - the width of the underline depends on tab content.
Secondary Styling Mode - JS Tabs, DevExpress

TabPanel Demo Tabs Demo

Form & Editors

Change Detection (Dirty State)


v23.2 includes the following changes:

  • Renamed the reset method to clear for uniformity and introduced a new reset method for editors to maintain reset functionality.
  • Deprecated the Form's resetValues method, replacing it with clear, and introduced a new reset method for the entire Form.
  • Added the isDirty flag for both editors and Form. isDirty helps detect changes in Form items or editors.

Change Detection - JS Form and Editors, DevExpress

Demo

DateRangeBox Support


You can now use editorType: 'dxDateRangeBox' to add our DateRangeBox component to a Form.


DateRangeBox Support - JS Form and Editors, DevExpress

'Outside' Label Mode


v23.2 includes a new 'outside' label mode for editors.


Outside Label Mode - JS Editors, DevExpress

DropDownButton — New 'Type' Option


The DevExtreme DropDownButton includes a type option like its Button counterpart.


Accessibility


The following accessibility-related enhancements have been introduced in this release cycle (WCAG and Section 508 standards):


  • Data Grid:
    - Improved color contrast.
    - All checker errors (Axe, WAVE, Lighthouse) were fixed.
    - Adaptive rows can now be expanded/collapsed using keyboard navigation.
    - We added the ability to focus on total summary and group footer summary.
  • We enhanced the reading experience for screen reader users. The following elements are now supported:
    - Modified cells and deleted rows in DataGrid batch edit mode.
    - Delete confirmation messages in DataGrid.
    - Sort header indexes in DataGrid.
    - Items in Lookup.
    - Dialog titles in HtmlEditor.
    - Validation messages in various components, such as DataGrid, HtmlEditor, DropDownBox, NumberBox, DateBox.
  • Global rework of aria-* attributes.
  • Improved keyboard navigation support for multiple components, including enhanced focus in the Calendar component.
  • We updated visual focus indication in our Popup and other components.

Performance

Vite Tree Shaking Support


We addressed Vite support restrictions that previously lead to a larger JS bundle size. You no longer need to disable Vite's Tree Shaking feature in your DevExtreme-based JS applications.


Reduce CSS Size

The DevExtreme package includes all Generic and Material themes. We reduced theme set size as follows:

  • 30% for Generic themes
  • 37% for Material themes
  • 34% overall
Performance - DevExtreme, DevExpress

Demos & TypeScript

React Demos — TypeScript and React Hooks


We migrated our React demo examples to TypeScript, providing you with two choices: JavaScript and TypeScript. Additionally, we made the switch from Class Components to Function Components.


Performance - DevExtreme, DevExpress

Performance - DevExtreme, DevExpress

Vue Demos — TypeScript and Vue Composition API


We transferred all our Vue demo code to TypeScript. We also transitioned from Options API to Composition API.


TypeScript Enhancements


  • Angular component properties now support literal union types. IntelliSense supplies hints to identify misuse of such types in code.
    TypeScript Enhancements - DevExtreme, DevExpress
  • DevExtreme Angular allows you to specify generic type parameters to define instances of data-aware components like DataGrid.
TypeScript
import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';
import { Employee } from './data';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent<Employee, number>;

    onButtonClick() {
        const selectedRows: Employee[] = this.dataGrid.instance.getSelectedRowData();
    }
}

Your Feedback Matters
We thank you for your continued support. Once you’ve reviewed the features/capabilities introduced in our v23.2 release cycle, please take a moment to complete our online survey. Your comments will help us refine our development plans for our v24.1 release set for release in 2024.