DevExtreme DataGrid and TreeList – Performance Improvements (v18.1)

I love it when our devs can squeeze out even more performance improvements from our controls. So I'm happy to report that we've improved the DevExtreme DataGrid and TreeList's performance for the following features: virtual scrolling, fixed columns, and auto column width. Let's take a look.

Local Virtual Scrolling

Let's start with 'local virtual scrolling'. As you may know, in virtual scrolling mode, pages are loaded when entering the viewport and removed once they leave. This mode allows users to scroll data by jumping swiftly from one row to another. Scrolling in this mode becomes smoother if the widget preloads the adjacent pages. And local means that the data is loaded locally on the client-side.

We have decreased the rendering time during scroll operations for local virtual scrolling. This decrease has allowed us to make rendering synchronous and therefore much faster. You can see the difference from the previous version in the following video:

However, if a grid row's markup is heavy then it may result in 'jerky' scrolling. In this scenario, the grid will revert to asynchronous rendering to avoid grid scrolling issues.

Dispose Out-of-bounds

We've also made an improvement in virtual scrolling where the DataGrid will dispose of markup that is out of the visible boundaries. This improves virtual scrolling performance during intensive scrolling.

Remote Virtual Scrolling

We've also made several changes to virtual scrolling with remote data that helps improve performance.

1. For remote data that has been loaded, we now cache the pages. This significantly reduces the request count on the server.

2. A large page size can be used to reduce the request count too. For a DataGrid with large pageSize, you can now use the new scrolling.rowRenderingMode option to improve performance. And you can use it with either paging or virtual scrolling modes:

scrolling: { 
    rowRenderingMode: "virtual" 
}

3. We also have a great new 'loading' indicator that replaces the old spinning 'loading' icon. In fact, it doesn't even looking like your typical 'loading' indicator. When necessary, it will show 'blocks' where the grid data is typically located. This is much easier on the eyes.

You can see these changes in action here:

Horizontal Virtual Scrolling

There are some instances where you may have more than 100 columns in your DataGrid or TreeList. In fact, we have some customers using many more than that.

For these scenarios, you can get improved performance by enabling virtual scrolling over columns. This feature decreases the rendering time for a grid with a huge number of columns.

You can enable this feature using the columnRenderingMode option:

scrolling: { 
    columnRenderingMode: "virtual" 
}

To achieve the maximum performance in this mode, we recommend setting the columnWidth option as well.

Rendering Performance

The team has also improved the rendering time when using fixed columns or the column auto width features. Take a look at the improved speed differences in grid render time:

* the columnRenderingMode option is set to 'virtual'
** the rowRenderingMode option is set to 'virtual'

Possible Issues

The performance improvements mentioned here apply to both the DataGrid and TreeList widgets.

To improve performance, we have made some changes that can affect your application. Please take a look at the list of five possible breaking changes here BC4277.

If these improvements cause unwanted behavior in your application, you can roll back to the legacy rendering mechanism using the legacyRendering option:

DevExpress.ui.dxDataGrid.defaultOptions({
    options: {
        legacyRendering: true
    }
});

Note: the legacyRendering option will be removed in v18.2. Please update your projects and if you need any help then be sure to contact our excellent support team.

Angular, Vue, React, ASP.NET MVC / Core and more

All of these new features will be available on all the frameworks we support: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Watch the Webinar

Watch the “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll see all the new DevExtreme v18.1 items demonstrated for our ASP.NET MVC, ASP.NET Core, React, Vue, or other client-side offerings.

Like it?

Upgrade your DevExtreme projects to v18.1 today. Then, let me know what you think of these performance enhancements by leaving a comment below.

If you have questions or suggestions about these improvements then please take part in this github issue. Thanks.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today