DevExtreme React - What’s New in v19.2

Our 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

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

Our 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

With this release, we've enabled asynchronous event handlers for the following events:

• setCellValue
• initNewRow
• rowValidating

Export to Excel API Enhancements (CTP)

Our Export to Excel API (CTP) was first introduced in May 2019. In v19.2, we've added the following new features:

• Only export selected rows
• Export with source column width

In addition, the 'group', 'header', 'groupFooter', and 'totalFooter' are now exported with highlighted text (bold).

We've also extended the 'CustomizeCell' callback argument set. You can access all properties of the DataGridCell object within the callback.

View code examples by individual use case

Demo - Advanced Document Customization

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". Our Web Diagram component supports stacked containers and ships with expand and collapse functionality.

New Data Binding Capabilities

We now ship 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

Our 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 our 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

Our 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)

New Progress and Status UI

We've 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

We have enhanced the validation capabilities of our 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).

{
    allowedFileExtensions: [".txt", ".xml", ".doc"],
    upload: {
        maxFileSize: 2048000
    },

    permissions: {
        upload: true
    }
}

If using our ASP.NET server-side extensions, you can enable the following server-side validation:

public IActionResult FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        MaxUploadFileSize = 2048000,
        AllowedFileExtensions = new[] { ".txt", ".xml", ".doc" },
        AllowUpload = true
        ...
    };

    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);

    return result.GetClientCommandResult();
}

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.

{
    fileProvider: new DevExpress.fileProviders.WebApi({
        endpointUrl: "../api/filesystem"
    }),

    permissions: {
        download: true
    }
}

If using our ASP.NET server-side extensions, you can allow users to download files as shown below:

public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        AllowDownload = true
        ...
    };

    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);

    return result.GetClientCommandResult();
}

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

Custom Annotations

Our 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 templates to customize chart tooltips.

Manage Chart Pane Size

You can now use templates to customize chart tooltips.

Display Negative Values for Logarithmic Scales

Datasets that contain rapidly growing values with negative and/or zero values can now be visualized within our logarithmic axis.

Discrete Aggregation

This release includes a new 'aggregateByCategory' option. When used, this option changes the way our 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, we've added zoom support to our Polar Chart.

VectorMap Coordinate Translation API

Thanks to your great feedback, we've introduced two new methods for coordinate translation (VectorMap). With this new API, your apps can now support more sophisticated map interaction usage-scenarios.

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

Asynchronous Validation

We've added a new Asynchronous Validation Rule to our 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

We now ship 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

Floating Action Button enhancements include:

• Add a label to an action
• Hide an action
• Reorder actions
• Expand the speed dial menu in a different direction

DevExtreme Angular Components now support Angular Ivy.

Chart Rotation

You can now swap X and Y axis as needed.

Transitions on Update

When a chart's data source is updated, a transition will be applied to the chart.

Column Size Enhancements

You can now use ‘em' and ‘%' CSS size units to specify column width.

Virtual Table Enhancements

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

Today Navigation Button

We've 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 our new React Scheduler Recurring Appointment edit from.

Form Scaffolding Wizard

We added a Form to the list of controls supported by our 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

We've improved our 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.

DevExtreme-based ASP.NET Core Documentation

DevExtreme ASP.NET MVC Documentation

[HttpGet]
public async Task
    Get(DataSourceLoadOptions loadOptions) {
        var source = _db.Products.Select(p => new {
        p.ProductId,
        p.ProductName,
        p.UnitPrice
    });

    return Json(await DataSourceLoader.LoadAsync(source, loadOptions));
}