;

DevExtreme React - What’s New in v22.2

We extended the capabilities of our DevExtreme component library with a set of responsive UI templates. These ready-to-use UI “blocks” will allow you to focus efforts on application logic and minimize energy spent on app/UI design.

Data Visualization

Range Bar Chart - Minimum Bar Size

Use the new minBarSize property to specify minimum size for bars displayed in the Range Bar Charts.

Range Bar Chart - Minimum Bar Size, DevExtreme

Data Visualization Components - Adapt to Container Resize

Our Chart, Gauge, and Map controls now automatically adapt to changes in container.

Data Visualization Components - Adapt to Container Resize, DevExpress

VectorMap - Control Panel Customization

The following options allow you to display/hide the Pan Control and Zoom Bar: panVisible and zoomVisible.

Pivot Grid

Export Field Panel Headers to Excel

You can now include field panel headers in an exported worksheet. The following field header export-related options available:

  • exportColumnFieldHeaders
  • exportDataFieldHeaders
  • exportFilterFieldHeaders
  • exportRowFieldHeaders

Export Field Panel Headers to Excel, DevExtreme

Field Chooser - Encode HTML

The new encodeHtml property allows you to process HTML tags as plain text or apply them to header filter values.

UI Components

CSS Styles Enchancements

The following components are now rendered more consistently under different use-case conditions (applies to both our Generic and Material themes):

  • Button
  • Calendar
  • Toolbar
  • DateBox
  • Scheduler
  • FieldSet
  • List

For instance, buttons within our Toolbar's overflow menu now reflect specified types and styling modes.

CSS Styles Enchancements - UI Widgets, DevExtreme

Validation Message Position

Our new validationMessagePosition option specifies the position of a validation message relative to the editor's input region. Available settings include: 'bottom' (default), 'top', 'left', and 'right'.

Validation - UI Widgets, DevExtreme

Show/Hide API Enhancements

The cancel parameter for onShowing/onHiding events now supports the Promise type. This allows you to execute asynchronous actions before components are displayed/hidden. This enhancement is available in the following UI components:

  • Popup
  • Popover
  • Tooltip
  • Toast
  • LoadPanel

The show/hide methods now return a Promise object, which is resolved once the operation is complete. This Promise is rejected if the operation was cancelled.

Slider & Range Slider - Value Change Mode

The Slider and Range Slider components now include a valueChangeMode option. This option specifies when a slider's value is changed. Available modes include:

  • The value changes when the user releases the slider handle.
  • The value changes immediately whenever the user moves the slider handle.

Slider Value Change Mode, DevExtreme

Toolbar Adaptability - Multiline Mode

Our Toolbar can now wrap across multiple lines when it is wider than its container. Use the multiline property to enable multiline mode.

Toolbar Adaptability, DevExtreme

Accordion - Title Templates for Individual Items

You can now define title templates for individual items. Use the titleTemplate property as requirements dictate.

Accordion Title Templates, DevExtreme

CheckBox - Cycle Through Three State

We extended the functionality of our CheckBox component. Users can now toggle between all three states by clicking a box (cycling from unchecked to checked and then to an indeterminate state).

Use the enableThreeStateBehavior option to enable this mode.

CheckBox - Cycle Through Three State, DevExtreme

Calendar - Week Numbers

The Calendar component can now display week numbers. Use the showWeekNumbers property to enable this option.

Calendar - Week Numbers, DevExtreme

The Calendar automatically sets the first week of the year based on culture (locale). We added the weekNumberRule property to specify the rule used to determine the first week of the year. Available rules include auto, first day, first four days, and full week.

SelectBox and TagBox - Submit Custom Items on Loss of Focus

We enhanced the default behavior of our SelectBox and TagBox components. These components create custom items when the user presses the Enter key or when the component loses focus.

And yes, you can assign a DOM event to the customItemCreateEvent property to change the default behavior as needed.

Form – Custom Label Template

Form labels can now display images and support content formatting. Use the label.template property to define a custom template.

Form – Custom Label Template, DevExtreme

Popup and Popover - Overflow Menu in Toolbar

Toolbars within our Popup and Popover components can now display an overflow menu.

Use the following API to customize the menu and toolbar items:

Popup and Popover - Overflow Menu in Toolbar, DevExtreme

DateBox - Customize Today Button Text

You can now rename the Today button (which appears in 'date' and 'datetime' modes). The new todayButtonText property specifies the text for the button.