DevExtreme - Real-Time UI Updates and New Push API (v18.2)

Our v18.2 release includes important live-update improvements and support for partial updates in several widgets. Everything in this post applies to all the platforms we support, including Angular, Vue, React, jQuery, Knockout and ASP.NET MVC and ASP.NET Core.

The features described in this post can be useful whenever your application requires frequent UI updates. Scenarios include local live updates, work with real-time data and push updates through WebSockets or similar channels (perhaps using SignalR or socket.io).

Easy Integration with Live Update Sources

The first improvement in v18.2 is the inclusion of the push() method on the data store. This allows you to easily apply changes to your data when change notifications are received. For instance, this code snippet pushes a data update to the store when a SignalR client function is invoked:

hub.client.updateStockPrice = function(data) {
  store.push([{ type: 'update', key: data.Symbol, data: data }]);
};

Here is a CodePen sample that demonstrates the push method.

Using the property reshapeOnPush in your data source configuration automatically calls load() when updates are pushed, so that data processing operations like sorting, filtering and grouping are applied correctly.

This CodePen sample shows the reshapeOnPush behavior.

Finally, the data source property pushAggregationTimeout sets a timeframe where changes you push are collected before the data source is updated.

Here is a CodePen sample for high-frequency updates. The pushAggregationTimeout is calculated automatically in this setup, which means that grid keeps updating efficiently when you increase the update frequency. Try to set pushAggregationTimeout to 1000 and you’ll see continuous updates once per second. Try setting it to 0 (zero) and you’ll see that the grid stops updating when you increase the update frequency too much (this setting is recommended in cases where you want to see infrequent updates applied immediately). Finally note that there is no remote source of update notifications in this sample - of course the push mechanism can be used for “local” updates, too!

A final cool feature for live updates is the property highlightChanges on the Data Grid. When you set this to true, the grid marks updated values with a CSS animation. This CodePen sample demonstrates the feature and also includes CSS blocks to customize the animation duration and colors.

Widgets Optimized for Live Updates

Several widgets (including the Data Grid, the Tree List, Tab Panel, Tabs, Accordion and List) now support a new option called repaintChangesOnly. This partial update support speeds up redrawing, and it fixes several drawing glitches (like flickering in master/detail setups) that customers encountered in the past.

In addition to the option repaintChangesOnly, we have also added an overload of the refresh() method that accepts a changesOnly parameter. This allows you to perform a partial update on a widget selectively.

Here are some numbers on refresh times in the Data Grid:

Refresh Modes for Data Editing in Data Grid and Tree List

We introduced a new property refreshMode that enables three different setups for reload and repaint handling when data is edited in the Data Grid or the Tree List and changes are saved. In the past, these two widgets always went through complete loading and painting cycles after data changes, which sometimes resulted in slow UI updates. Please follow the link above for details on the supported modes.

In this CodePen sample, you can see how the different refresh modes result in update operations when you change data in the grid.

Data Grid Summary Updates for Unsaved Data

Local summaries can now be recalculated automatically while the user is editing data. This behavior is supported when the new property recalculateWhileEditing is set for your summary configuration in the Data Grid. The main scenario for this feature is batch editing, but summaries are updated when a value editor loses focus - so the feature can also be used when multiple values are changed within one row.

You can try this feature by editing data in the Sale Amount column in this CodePen sample, or by adding or removing rows.

Your Feedback Counts

As always, we’d like to hear from you! Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

For some quick feedback, please submit your responses to this short survey: