DevExtreme 19.2

Chart component now supports custom annotations.
October 25, 2019
New Version

Features

New Gantt Component (CTP) - The new Gantt component for Angular, React, Vue and jQuery is available as a community technology preview. Built-in features include:

  • Resize and modify tasks
  • Change dependencies between tasks
  • Edit cell values within the TreeList region
  • Change history
  • Region resizing
  • Real-time scaling
  • Task selection API

Data Grid and TreeList

  • Reorder Records/Nodes - End-users can now reorder Data Grid rows and TreeList nodes via drag-and-drop.
  • Display Sort Indices for Multi-Column Sorting - The DataGrid and TreeList controls can now display sort indices within column headers when data is sorted against multiple columns. This feature is optional. Enable it to visually display sort order for your end-users. Deactivate the sorting.showSortIndexes option to hide sort indices.
  • Asynchronous API Enhancements - This release enables asynchronous event handlers for the following events:
    • setCellValue
    • initNewRow
    • rowValidating
  • Export to Excel API Enhancements (CTP)
    • Only export selected rows
    • Export with source column width
  • In addition, the 'group', 'header', 'groupFooter', and 'totalFooter' are now exported with highlighted text (bold).
  • Also extended the 'CustomizeCell' callback argument set. You can access all properties of the DataGridCell object within the callback.

Diagram (CTP)

  • Images within Shapes - You can now associate a predefined (or custom) image with the new image shape via a database or the widget's UI. The image will maintain the shape's size and its position when the shape is moved or resized.
  • Shape Containers - New shape types - horizontal and vertical containers - allow you to combine other shapes within a "container". The Web Diagram component supports stacked containers and ships with expand and collapse functionality.
  • New Data Binding Capabilities - Now ships advanced data binding options for shape settings. You can bind all shape properties including shape and connectors style, shape image URL, position, and size to a database.
  • Full Screen Mode - The Diagram now supports fullscreen mode. You can add a corresponding toolbar command or use the 'fullscreen' property to enable fullscreen mode within your web app.
  • Read Only Mode - Read only mode protects the Diagram from edit operations. Use the 'readOnly' property to enable this diagram option.
  • Simple View - When you activate the new Simple View mode, the Web Diagram removes gray document borders and its content fully consumes available screen real-estate.
  • Zoom - With this release, your end-users can zoom the diagram as needed. To change zoom level, use the 'Zoom Level' editor on the Properties panel or CTRL+Mouse scroll wheel combination. Select the 'Auto Zoom' check box to fit the diagram within the page.

UI Customization - The new API allows you to toggle the visibility and specify the content of the following UI elements:

  • Context Menu (contextMenu),
  • Properties Panel (propertiesPanel),
  • Toolbar (toolbar)
  • Toolbox (toolbox)

File Manager (CTP)

  • New Progress and Status UI - Introduced the following UI elements to display the progress and status of file operations:
    • Popup notification messages
    • Enhanced 'Refresh' toolbar item
    • Operation progress side panel
  • Integrated Splitter - The built-in splitter control allows you to resize the File Manager's navigation panel.
  • File Validation Enhancements - Enhanced the validation capabilities of the File Manager. You can now specify allowed file extensions using the new allowedFileExtensions option. The new upload.maxFileSize option allows you to specify the maximum file size (maximum size allowed).
  • Download Files - You can now allow your users to download files. Use the new endpointUrl option to specify your server-side handler endpoint used for download operations.
  • Toolbar and Context Menu Customization - You can now customize the File Manager's toolbar and context menu via two new options (toolbar and contextMenu).
  • Custom File Providers - You can now implement a custom File Provider that allows you to connect the client-side File Manager to any custom file management backend.
  • Direct File Upload to Cloud Providers - You can now upload files directly to Azure, Amazon and other cloud providers. Use the FileUploader's uploadChunk and abortUpload callbacks.
  • Access File Content on the Client-Side - With this release, you can obtain binary file content info within the web browser using the 'FileProvider.getItemContent' method.

Data Visualization

  • Custom Annotations - The Chart widget now supports custom annotations. You can use a template to render the desired content within the annotation container.
  • Custom Text Inside a Donut - With this release, you can include custom SVG markup inside a Donut chart (your content will be placed at the center of Donut/Pie chart).
  • Template-Based Tooltip Customization - You can now use templates to customize chart tooltips.
  • Custom Legend Item Markers - You can now use a custom template to render Chart legend markers.
  • Manage Chart Pane Size - You can now control the size of chart panes. Both pixel and percentage units are supported.
  • Display Negative Values for Logarithmic Scales - Datasets that contain rapidly growing values with negative and/or zero values can now be visualized within the logarithmic axis.
  • Discrete Aggregation - This release includes a new aggregateByCategory option. When used, this option changes the way the Chart widget aggregates discrete data. If set to 'true', the chart widget aggregates series points for the same category.
  • Polar Chart with Zoom - To help you create the best possible interactive user experience, added zoom support to the Polar Chart.
  • VectorMap Coordinate Translation API - Thanks to your great feedback, introduced two new methods for coordinate translation (VectorMap). With this new API, your apps can now support more sophisticated map interaction usage-scenarios.

Themes

  • Custom CSS Bundles - You can now bundle CSS styles for UI components used within your application. You can also create multiple bundles of different DevExtreme Color Swatches (which contain different component sets).

UI Widgets

  • Asynchronous Validation - Added a new Asynchronous Validation Rule to the Validation Engine. You can now specify a callback function to perform remote data validation (of any kind). When data validation is in progress, DevExtreme data editors display an animation indicator (the indicator turns into a "result" icon once validation is complete).
  • Data Form - Dynamic Updates without a Full Re-Render - You can customize DevExtreme Data Form item(s) within a group or tab (add/remove/display/hide) in code without re-rendering the entire form.
  • New Drag & Drop Utilities - Now ships a drag-and-drop utilities library so you can implement custom drag-and-drop functionality within your web app.
  • Cross-Component Drag & Drop API - This new API allows you to incorporate cross-component drag-and-drop support.
  • Floating Button Enhancements
    • Add a label to an action
    • Hide an action
    • Reorder actions
    • Expand the speed dial menu in a different direction

Angular Ivy Support

  • DevExtreme Angular Components now support Angular Ivy.

Native React Chart

  • Chart Rotation - You can now swap X and Y axis as needed.

Native React Grid

  • Column Size Enhancements - You can now use ‘em' and ‘%' CSS size units to specify column width.
  • Virtual Table Enhancements - The Virtual Table plugin includes the following enhancements:
    • Access and track table scroll position via API
    • Banded column mode
    • Lazy loading with record grouping enabled
  • Inline Cell Editing - Inline cell editing allows end-users to place a grid cell into edit mode when a cell is clicked (without the need to press the edit button within the edit column).
  • Group Row Summary - You can now display summary information within the group row.

Native React Scheduler

  • Today Navigation Button - Added a 'Today' button to the React Scheduler's navigation panel. This feature was inspired by Google's Calendar. Use this button to quickly navigate to the current date.
  • Recurring Appointments - You can now specify appointment recurrence patterns in code or allow end-users to configure it via the new React Scheduler Recurring Appointment edit from.

Visual Studio Integration

  • Form Scaffolding Wizard - Added a Form to the list of controls supported by the Visual Studio Scaffolding Wizard. You can now quickly generate forms based on model classes.
    • DevExtreme Angular Documentation
    • DevExtreme-based ASP.NET Core Documentation
    • DevExtreme ASP.NET MVC Documentation
  • Async Support in API Controller Scaffolding Wizard - Improved the API Controller Scaffolding Wizard to better leverage the asynchronous capabilities of Entity Framework and Entity Framework Core. The API Controller Scaffolding Wizard can now generate asynchronous (async-await) code for controller actions.
Custom Annotations

DevExtreme Complete

JavaScript Component Suite for Responsive Web Development.

Got a Question?

Live Chat with our DevExpress licensing specialists now.