DevExtreme 18.2

New Push Notification API

• This new release addresses 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).

Real-time UI Updates

• 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.

Data Grid & Tree List

• Live Update and Performance Enhancements - To address the most popular usage scenarios, this release has 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. The 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 - This release introduces 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. The new API allows you to implement custom keyboard navigation through individual cells.
• Excel Data Export Customization Enhancements - This release has extended the capabilities of the 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 the 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

Data Visualization

• 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 - 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
  • This release also includes 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 - This release refines the 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

Scheduler

• Group by Date - You can now group Scheduler appointments first by date and then by resources.

UI Widgets

• 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 - The 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 the File Uploader widget:
  • allowedFileExtensions
  • minFileSize
  • maxFileSize
• Filter Builder API Enhancements - You can now limit Filter Builder group nesting and specify available operations.
• Performance Enhancements - The 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.

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 the 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.

MVC Controls

• Bootstrap 4 in MS Visual Studio Project Templates - This release upgrads the Twitter Bootstrap version in the MS Visual Studio Project templates. You can now utilize all the advantages of the Bootstrap 4 CSS Framework.

Angular Components

• Responsive Application Layout Template​ for Angular - The new Application Layout template is integrated with the new DevExtreme CLI tools.
• DevExtreme CLI - Angular Apps and Views Generation - v18.2 introduces new CLI tools. You can now bootstrap Angular CLI based applications that are tightly integrated with DevExtreme. DevExtreme CLI utilizes the 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.

Vue Components

• DevExtreme Vue Wrappers (RTM) - The 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
  • Also added new demos to the Widgets Gallery. All new DevExtreme widgets introduced in this release cycle are also available for Vue.

React Components

• DevExtreme React Wrappers (RTM) - v18.2 marks the official release of the 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 the 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) - The DevExtreme React Chart widget was first introduced in May 2018 as a community technology preview. This update introduces the following new features:
  • Stacked Series
  • Non-Linear Axes Types
  • Color Palette Management
  • 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).