DevExtreme React - What’s New in v18.2

We have addressed the needs of those who are building apps that display/render real-time data. With this release, you can integrate DevExtreme controls with your SignalR server (or any other notification service).

The new 'push' method is now available within a 'Store' instance.

New DataSource options include:

• reshapeOnPush — specifies if sorting, grouping, paging and other shaping operations should be applied on push notification;
• pushAggregationTimeout — specifies the period within which the arrived notifications are aggregated into a batch.

Live Update and Performance Enhancements

With this release, our Data Grid and Tree List reflect changes to real-time data much faster. To address the most popular usage scenarios, we have extended the Grid's and TreeList's API in the following manner:

• repaintChangesOnly — if set to 'true', push updates don't force the component to fully re-render. Our new change tracking strategy updates only the modified portion of the component UI.
• editing.refreshMode — specifies control behavior once a row is edited:
  • 'full' — requests new data from server, shapes and renders it;
  • 'reshape' — reshapes local data and renders it;
  • 'repaint' — re-renders local data without reshaping.
• summary.recalculateWhileEditing — enables real-time summary recalculations while editing (for client-side summaries only).
• highlightChanges — enables visual highlighting of updated cells.

Focused Row and Keyboard Navigation Enhancements

We've introduced a new API to control DataGrid and TreeList focused row operations. This feature is useful when you need to display Master-Detail relationships, navigate through records and view details in a side-by-side view.

You can also use mouse or keyboard to navigate through rows. Our new API allows you to implement custom keyboard navigation through individual cells.

Excel Data Export Customization Enhancements

We've extended the capabilities of our Excel data export engine so you can control the appearance of exported data more effectively (font, background color, etc.).

Command Column Customization

This release includes new command column customization options for our DataGrid and TreeList controls. These include:

• specify command column width, position, or template;
• fix, or 'pin', a command column to the left or right;
• add a custom command button to the 'edit command' column;
• add any number of custom command columns;
• hide or show command buttons for specific rows.

New Sankey Diagram Component

The new Sankey component will help you visualize data as flows or relationships between different parts of systems. This widget supports the following features:

• several predefined palettes, including a Material-style palette;
• node alignment and reordering;
• title and subtitle;
• client-side export and printing;
• tooltip support;
• user interactions (hover, click).

Real-Time Chart Updates

We've added support for real-time data updates within a Chart without a full chart redraw. When a new point arrives, you can use one of the following behaviors:

• keep — new data doesn't affect what you see;
• shift — new data shifts the visual range;
• reset — new data redraws the chart;
• auto — the chart's behavior depends on the current visual range position.

We've also included uninterrupted navigation during data updates (you can zoom, scroll and explore a chart while it is updated in the background). You can also jump to your new data and view it in real-time.

Zoom/Scroll Enhancements

We have refined our JavaScript Charting library to support the following:

• zoom a chart by its value-axis;
• select the desired area using your mouse (or via a gesture on touch devices);
• save zoom level on data updates;
• scroll/zoom to areas without data;
• a chart is continuously updating during zooming/scrolling operations.

Group by Date

You can now group Scheduler appointments first by date and then by resources.

New HTML/Markdown WYSIWYG Editor (CTP)

This release introduces a new rich WYSIWYG text editor. This UI widget allows you to change text styles, create lists and add hyperlinks and images. Both HTML and Markdown target markup formats are available.

DateBox — Masked Input

Our DateBox widget allows you to specify a date mask and control user input as needed.

New Drawer Component

This release includes a new Drawer component for building responsive application layouts. It can be used to implement collapsible navigation, information, and tool panels. With a wide range of configuration options, you can specify Drawer position, reveal animation, open/close behavior and more.

New ButtonGroup Component

The new ButtonGroup component consists of a set of toggle buttons. Both single and multi-select modes are available.

File Uploader Enhancements

This release includes the following client-side file validation options for our File Uploader widget:

• allowedFileExtensions;
• minFileSize;
• maxFileSize.

The new chunkSize option allows you to upload large files in "chunks."

Filter Builder API Enhancements

You can now limit Filter Builder group nesting and specify available operations.

Performance Enhancements

Our List, Accordion and TabPanel components now support partial UI updates. Use the new 'repaintChangesOnly' option to enable this feature.

New Button and Editor Styles

You can now customize button and editor appearance as business needs dictate. Buttons ship with the following styling modes: "Contained", "Outlined" and "Text". Editor styling modes include: "Outlined", "Filled" and "Underlined". New styles are available for both Material and Generic themes.

Color Swatches

You can now create and use multiple DevExtreme color schemes within the same application. For instance, you can implement a dark navigation sidebar with a light content area. This feature is available in the both ThemeBuilder UI and CLI tools.

DevExtreme CLI — Custom Theme Generation

The new ThemeBuilder CLI allows you to generate custom DevExtreme color schemes and save them as a CSS file without using our ThemeBuilder UI.

You can also use the DevExtreme theme variables within your app to deliver a more consistent UI. Use the ThemeBuilder CLI to export any theme variable as LESS or SASS file.

New ThemeBuilder UI

The new ThemeBuilder UI ships with a more intuitive UX and supports new theming capabilities such as Color Swatches.

A Dark Set of Material Design Themes

A set of new 5 dark Material Design themes are available in v18.2. You can use them 'as is' or inherit a custom dark Material Design theme.

Bootstrap 4 in MS Visual Studio Project Templates

We have upgraded the Twitter Bootstrap version in our MS Visual Studio Project templates. You can now utilize all the advantages of the Bootstrap 4 CSS Framework.

Responsive Application Layout Template​ for Angular

Our new Application Layout template is integrated with our new DevExtreme CLI tools.

DevExtreme CLI — Angular Apps and Views Generation

v18.2 introduces our new CLI tools. You can now bootstrap Angular CLI based applications that are tightly integrated with DevExtreme. DevExtreme CLI utilizes our new Application Layout template and build-time theming capabilities. You can also add Angular views with DevExtreme components into your existing applications.

MS Visual Studio Angular Views Scaffolding​

With this release, you can scaffold Angular views into your Visual Studio Angular project. These views are built upon DevExtreme Angular components and bound to your ASP.NET Core CRUD API endpoints.

DevExtreme Vue Wrappers (RTM)

Our Vue Wrappers have been released to manufacturing and ship with the following enhancements:

• rendering customization via named slots;
• 'v-on' directive support (and @ shorthand);
• Vue prop validation and type checks;
• TypeScript support;
• child configuration components (for instance, 'dx-column' for DataGrid columns configuration).

Data binding capabilities include:

• one-way data binding;
• two-way data binding ('.sync' modifier);
• 'v-model' support for data editors.

We've also added new demos to our Widgets Gallery. All new DevExtreme widgets introduced in this release cycle are also available for Vue.

DevExtreme React Wrappers (RTM)

v18.2 marks the official release of our React Wrappers. This update includes the following new features:

• controlled and uncontrolled modes;
• rendering customization via native React template components or a render method (props with -Component or -Render postfixes);
• TypeScript support;
• type checking with React PropTypes;
• support for the 'className' and 'ref' React attributes;
• child configuration components (for instance, DxColumn for DataGrid columns configuration).

New Native React Scheduler Component (CTP)

This release includes the first iteration of our native React Scheduler/Calendar control. The following features are now available:

• week, work week and month views;
• date and view choosers;
• all-day panel;
• appointment tooltips.

Native React Chart (CTP)

Our DevExtreme React Chart widget was first introduced in May 2018 as a community technology preview. This update introduces the following new features:

• Stacked Series

  Documentation and Demos

• Non-Linear Axes Types

  Now you can specify logarithmic, exponential or custom axes types.

  Documentation and Demos

• Color Palette Management

  You can now specify a chart's color palette. You can use palettes from the open source D3 library or create your own.

  Documentation and Demos

• Animations

  We have enhanced our React Chart component with animations.

  

Native React Grid — Fixed Columns

You can now anchor columns to the left or rightmost edge of the Grid. These fixed columns are never scrolled horizontally and as such, allow you to create solutions that offer improved readability and visual clarity.

Native React Grid — Data Summary Rows

The React Grid component can now calculate a summary for all rows (total summary), row groups (group summary), and tree nodes that contain child nodes (tree summary).