;

DevExtreme React - What’s New in v21.1

DataGrid

Export to PDF

Our Export to PDF API now includes the following options/capabilities:

  • WISIWYG Export to PDF
  • Fit-to-page
  • Multi-Page Export
  • Text Wrapping
  • Progress Indication
  • Cell Content, Format, and Appearance Customization options
Export to PDF - Data Grid | DevExpress
Demo

Data Grid & Tree List

Pager Enhancements

v21.1 includes the following pager-related enhancements:

  • A new pager.displayMode property. This property specifies the pager's display layout: full, compact, or adaptive.
  • Our page size selector can now display 'All' records on a page (pager.allowedPageSizes).
Demo

Editing API Enhancements

You can now use declarative bindings to insert new rows in Angular, React, and Vue applications.

Demo

Add New Rows to a Specified Position (CTP)

You can now insert a new row at any location within a list (first, last, or a custom position).

Discussion

Diagram

Get a Diagram Shape or Connector by ID or Key

This release allows you to obtain a diagram shape or connector by its internal identifier (getItemById) or by a data key (getItemByKey).

New shape properties include information about containers:

Iterate through Diagram Shapes and Connectors

Use our new getItems method to obtain an array of all diagram items (shapes and connectors).

Select Shapes and Connectors

v21.1 includes the following API enhancements:

Demo

Scroll to Item

Use the new scrollToItem method to scroll the drawing canvas to the specified diagram item.

ES6 Modules

DevExtreme's npm distribution now includes ES6 modules. These modules help optimize Tree Shaking and decrease production JS bundle size. Our internal tests demonstrate a 15-25% bundle size reduction.

With this update, you can also use modern JS bundlers that don't support the CommonJS module format and only work with ES6 modules.

Discussion

File Manager

Customize a Context Menu for Individual Files/Folders

Our new onContextMenuShowing event allows you to customize your app's context menu for individual files and folders. You can add/remove menu items, specify item state, etc.

Describe Errors on the Client

The File Manager's API includes a new FileSystemError class. This class allows you to specify an error code (errorCode), error description (errorText), and file system element (fileSystemItem) when handling errors within 'CustomFileSystemProvider'.

Show/Hide Progress Panel

Use our new showPanel and showPopup options to display a progress panel and pop-up notifications within the File Manager.

Custom HTTP Headers in Remote File System Provider

You can now customize Ajax (beforeAjaxSend) and form submit requests (beforeSubmit) before they are sent to the server.

Gantt

Export to PDF (CTP)

Our Gantt component can now export content to PDF.

Demo

API Enhancements

v21.1 includes the following Gantt related API updates:

API Enhancements - Gantt | DevExpress

HTML/Markdown Editor

v21.1 marks the official release of our HTML/Markdown Editor. The DevExpress HTML/Markdown Editor includes the following integrated features:

  • Inline, Block, and Embedded Format Support (Run Demo)
  • Format Customization (Documentation)
  • Custom Modules (Documentation)
  • HTML and Markdown Support (Run Demo)
  • Insert Image (a link or base64-encoded string) Support (Run Demo)
  • Mail Merge Support
  • Copy-Paste Rich Content Support
  • Mentions (Run Demo)
  • Multiline Toolbar
  • Table Support (Run Demo)
  • Localization
HTML Editor | DevExpress

Scheduler

Scheduler

Our redesigned Agenda View now displays resources and a recurrence indicator for recurring appointments. Color markers help users differentiate appointments by resource.

Agenda View - Scheduler | DevExpress
Demo

Horizontal Virtual Scrolling

Horizontal Virtual Scrolling is now available across all Scheduler Views. When virtual scrolling is enabled, the Scheduler only renders grid cells and appointments that fall into the visible viewport.

Demo

Drag-and-Drop Enhancements

Drag&drop is now more intuitive and event positioning more predictable.

Drag and Drop - Scheduler | DevExpress
Demo

TypeScript Enhancements

DevExtreme v21.1 includes the following TypeScript related enhancements:

  • DevExtreme modules no longer contain JQuery types if JQuery is not used in your target project.
  • You can now use named types for event arguments within your application code.
  • Event argument types now contain information about optional properties (that can be undefined) and writable properties (that can be modified in your event handlers).
Discussion