DevExtreme React - What’s New in v22.1

Export to PDF

v22.1 marks the official release this feature. Our Export to PDF API includes the following options/capabilities:

• WYSIWYG cell data export
• Fit-to-page option
• Multi-page export
• Text Wrapping
• Progress Indication
• Cell Content, Format, and Appearance Customization options
• RTL Support

Grid Column Enhancements

Grid columns now display items based on the applied filter (not all items as in previous versions).

Pager - Enhanced Compact Mode

The grid's pager now displays paging information using a compact display mode.

Image Upload

Our HTML Editor ships with image upload support. You can drag-and-drop images onto the editor surface or use the upload form (select files from a file system or specify a URL). You can also resize images within the editor.

Use the fileUploadMode property to specify whether to upload images on the server or to the client using the base64 format. The imageUpload.tabs property specifies the visibility of corresponding tabs in the dialog. Use this property to display 'From this computer', 'From the web', or both tabs.

All-Day Panel Modes

We added a new allDayPanelMode setting that allows you to specify which appointments to display within the All-day Panel. Available options include:

• hidden - the Scheduler renders all-day appointments in the timetable. The All-day Panel is hidden.
• allDay - the All-day Panel displays only explicit all-day appointments. Implicit all-day appointments are shown in the timetable.
• all - the All-day Panel displays explicit and implicit all-day appointments.

Custom Fonts for PDF Export

We added a new font option to the ExportToPdf(options) method so you can specify a custom font for an exported PDF document.

Scale Customization

We added a new scaleCellPrepared event to help customize the look and feel of scale cells. You can now specify color, style, and text settings.

Display Multiple Toasts in a Stack

With this update, toasts no longer overlap each other. We added two new methods: notify(message, stack) and notify(options, stack) to help display toasts one under another. Use the hideToasts method to hide all toast messages.

Resizable UI Enhancements

Our Resizable component includes two new options:

• keepAspectRatio - Specifies whether to proportionally resize component content when a user drags its corner handle.
• area - Specifies a bounding container. A user can't resize the component outside the boundaries of the specified container.

Validation Summary Enhancements

The new refreshValidationGroup method allows you to rebind the Validation Summary component to its target Validation Group whenever the validation group is recreated.

Toggle Between Open Popups

We improved our Popup component. The active/focused popup window is now placed on top of one another when a user switches between open popups via a pointing device or keyboard.

Change Data Label Formats

Use the label.displayFormat property to change the format of data labels within a chart.

String Literal Unions

We improved our TypeScript declarations and typings. v22.1 introduces dedicated types (string literal unions) for properties that accept a predefined list of values.

React Application Templates for TypeScript

We implemented the TypeScript version of our DevExtreme React Application Template. Specify the 'typescript' parameter in the CLI command to generate the TypeScript version.

devextreme new react-app app-name --template="typescipt"

v22.1 ships with a new UI Template Gallery. This preview includes CRM and Project Management UI/UX patterns for Angular. We will support React and Vue in future updates.