;

DevExtreme React - What’s New in v19.1

New File Manager Widget (CTP)

Our new File Manager control allows you to reproduce the Windows File Explorer UX in your next web app. Its features include:

  • File and folder structure display options
  • File upload options
  • Thumbnail and Details view modes
  • Client-side responsive UI
  • REST API for file operations
  • Predefined helpers to connect to a server file system.
New DevExtreme File Manager Widget | DevExpress

New Diagram Widget (CTP)

Our new jQuery Diagram allows you to incorporate information-rich diagrams, flow charts and organization charts with ease. Features include:

  • 35+ Predefined Shapes
  • Custom Shapes
  • Shape Sizing
  • Shape Drag-and-Drop
  • Auto Layout
  • Snap to Grid
  • External Data Binding
  • Configurable Page Settings
  • Customizable Shape and Connector Style Settings
  • Export to SVG, PNG and JPEG
New DevExtreme Diagram Widget | DevExpress

Data Grid and Tree List

Keyboard Navigation Enhancements

This release includes new keyboard behavior options. These options allow you to address a variety of high-speed data entry usage scenarios.

  • Start Editing via KeyPress

    Users can now instantly edit data - no need to switch to edit mode.

    DevExtreme DataGrid - Start Editing via KeyPress | DevExpress
  • Configurable Enter Key Action

    You can specify whether an Enter key press switches to edit mode or moves focus to the next cell.

    DevExtreme DataGrid - Configurable Enter Key Action | DevExpress
  • Configurable Enter Key Direction

    You can configure an Enter key press to move cell focus to the next column or row (horizontally or vertically).

    DevExtreme DataGrid - Configurable Enter Key Direction | DevExpress

Accessibility Enhancements

You can now navigate to and interact with DataGrid and TreeList UI elements (such as headers, pager controls, and the command column) via the keyboard.

DevExtreme DataGrid - Accessibility Enhancements | DevExpress

New DoubleClick Events

Data Editing - New API

TreeList - A New Filter Mode

We've extended the filtering capabilities of the TreeList with a new data filter mode. When used, filter results include the children of filtered nodes.

DevExtreme TreeList - A New Filter Mode | DevExpress

DataGrid - New Export To Excel API (CTP)

This release (available as a CTP) includes a new, more flexible API based on the ExcelJS library. Features include:

  • Ability to add a custom header/footer
  • Export multiple grids into a single worksheet
  • Export multiple grids into a single document using separate worksheets
  • Rename the exported file
  • Generate worksheets with custom content
  • Display a loading indicator for large datasets
DevExtreme DataGrid - New Export To Excel API | DevExpress

This feature can be used in conjunction with our existing export to Excel API. As such, it won't break your existing apps and can be tested independently.

UI Widgets

New Dropdown Button Widget

v19.1 introduces a new button widget with a built-in dropdown menu. This widget can be used as a stateless set of clickable menu items or as a stateful analog of a SelectBox control (which looks like a button).

New DevExtreme Dropdown Button Widget | DevExpress

New Floating Button Widget

Our new Floating Button Widget is a single button positioned at the bottom corner of the screen. It contains one or more primary screen actions. The floating button widget follows Google's Material Design guidelines.

New DevExtreme Floating Button Widget | DevExpress

HTML/Markdown Editor - Resize Media Blocks

You can now resize images and video blocks via mouse operations:

DevExtreme HTML/Markdown Editor - Resize of Media Blocks | DevExpress

HTML/Markdown Editor - Mentions Support

Mentions allow you to select users or user groups by typing @ when composing rich text content. You can also implement any custom embedded lookups such as issue references using # symbol as a prefix.

DevExtreme HTML/Markdown Editor - Mentions Support | DevExpress

Text Editors - Custom Buttons

With this release, you can add additional buttons to data editors and reorder built-in actions.

DevExtreme Text Editors - Custom Buttons | DevExpress

Pivot Grid

Remote Data Paging

Our PivotGrid’s data layer can now request the data it needs for an individual page. Remote data paging improves performance against large volumes of aggregated data.

PivotGrid - Cascade Filtering

Our PivotGrid can now apply parent field filters. For instance, if you filter the PivotGrid by the 'Country' field, the 'City' field's filter items will also be filtered against the same Country.

DevExtreme PivotGrid - Remote Data Paging | DevExpress

Scheduler

Adaptivity and UX Enhancements

We have improved Scheduler usability on mobile devices. In v19.1, the Scheduler control renders a popup appointment list instead of a tooltip. The appointment list is displayed in full screen mode.

The appointment edit form is also rendered in full-screen mode on mobile devices.

In addition, larger appointment markers are now used on mobile devices.

DevExtreme Scheduler - Adaptivity and UX Enhancements | DevExpress

Data Visualization

Chart Annotations

You can now annotate charts with custom labels.

DevExtreme Charts - Annotations | DevExpress

Legend Enhancements

  • Customize Legend Items

    We added a 'legend.customizeItems' callback so you can change the order, text, and visibility of legend items.

    Documentation Demo

  • Legend Title

    A legend title can now be specified and configured using the 'legend.title' option. You can customize the title's appearance and its position, and add a subtitle as well. This new option offers the same capabilities as the widget's root title option.

    DevExtreme Charts - Legend Customization | DevExpress

    Documentation Demo

  • Add a Legend to the Bar Gauge

    DevExtreme Charts - Add a Legend to the Bar Gauge | DevExpress

    Documentation Demo

Resolve Label Overlaps

The resolveLabelOverlapping option allows you to specify widget behavior when labels overlap one another.

  • Resolve Label Overlaps within a Funnel Chart

    In the Funnel, this option accepts 'shift' (default), 'hide' and 'none.' If no room exists to display all labels after a shift, the algorithm hides labels as needed.

    DevExtreme Funnel Chart - Resolve label overlaps | DevExpress

    Documentation

  • Resolve Label Overlaps in Bar Gauge

    resolveLabelOverlapping accepts 'hide' (default) and 'none'.

    DevExtreme Bar Gauge - Resolve label overlaps | DevExpress

    Documentation

Miscellaneous Chart/Gauge Enhancements

Sticky Hovering

Display a tooltip when a point/series is hovered.

DevExtreme Charts - Display a tooltip on point-series hover | DevExpress
Word-wrap Support

Word-wrap is now supported within the Title, Chart axes labels, PieChart and TreeMap labels.

  • You can now control exported chart layout (layout by columns, etc.)

    Documentation Demo

  • You can now move constant lines behind or in front of other series.

    Documentation

DevExtreme Charts - Word-wrap support | DevExpress

Themes

New Compact Material Design Theme

DevExtreme Compact Material Design Theme | DevExpress

React Components

Responsive Application Layout Template for React

Our new React Application Layout template is based on the DevExtreme Drawer component and integrated with DevExtreme CLI tools. It's ready to use on desktop, tablet, and phone devices.

DevExtreme React - Responsive Application Layout Template | DevExpress

CLI Tools - React Apps and View Generation

v19.1 introduces new CLI tools. You can now bootstrap create-react-app based applications that are tightly integrated with DevExtreme. DevExtreme CLI utilizes our new React Application Layout Template and build-time theming capabilities. You can also generate empty React views and add it to application navigation and routing.

Native React Grid - Virtual Scrolling with Remote Data: Lazy-loading

We've added virtual scrolling support for the grid when using remote data. Our grid is now more responsive and efficient when working with large remote data sets (only the visible data range is requested from the server when rendered).

DevExtreme Reactive - Grid Virtual Scrolling with Remote Data | DevExpress

Native React Scheduler - Drag-and-Drop Support

You can now modify appointment start/end dates and times via drag-and-drop and resize actions.

DevExtreme Reactive - Scheduler Drag-and-Drop Support | DevExpress

Native React Chart - Scrolling & Zooming

DevExtreme Reactive - Chart Scrolling and Zooming | DevExpress
DevExtreme Reactive - Chart Scrolling and Zooming | DevExpress

Vue Components

Responsive Application Layout Template​ for Vue

We've introduced a new Vue Application Layout Template that uses our Drawer component to create app navigation and content. We've also integrated this template into our DevExtreme CLI tools.

Our Layout Template can be used when developing apps for desktop, tablet, and mobile devices.

DevExtreme Vue - Responsive Application Layout Template | DevExpress

DevExtreme CLI - Vue Apps and Views Generation

You can now bootstrap Vue CLI based applications that are tightly integrated with DevExtreme. DevExtreme CLI utilizes our new Vue Application Layout Template and build-time theming. You can also generate empty Vue views and add them to app navigation and routing.

Visual Studio Integration

DevExtreme-based Responsive Visual Studio Project Template

To help you quickly create responsive ASP.NET Core apps, we've added a new project template for Visual Studio 2017 and Visual Studio 2019. This template was inspired by our existing responsive template for Angular.

ASP.NET Core - DevExtreme-based Responsive Visual Studio Project Template | DevExpress