JavaScript PivotGrid - Remote Data Paging and Cascade Filtering (v19.1)

Remote Data Paging

Performance is always on our minds. For controls like the PivotGrid – a product that deals with thousands and even millions of unique values – we try to balance the way in which data is managed by the control and the amount of data sent across the wire.

For example, the PivotGrid supports OLAP Cubes (to efficiently handle data on the server), but the XML sent to the client can be quite complex and large. This might result in slower performance and - in edge cases - it may even crash the PivotGrid.

With Remote Data Paging support (available in v19.1), we now allow you to fine-tune the data transfer process. Remote Data Paging allows the PivotGrid to request data on demand from the OLAP Cube. This results in smaller chunks of data being sent across the wire. Though it does create more server requests, on the whole, we believe it offers better overall performance.

Using Remote Data Paging

At present, Remote Data Paging only works when connecting to OLAB Cubes that use 'virtual' scrolling mode. As you can see below, you also need to set the dataSource.paginate option to true.

                dataSource: { 
                    store: store, 
                    paginate: true, 
                    fields: [/* fields */] 
                }, 
                scrolling: { 
                    mode: 'virtual' // <- needs to be set to virtual !
                } 

Limitations?

While this feature offers significant performance benefits, limitations do exist:

• Only works when connecting to OLAB Cubes (XmlaStore)
• The allowSortingBySummary option is ignored
• The allowExpandAll option is ignored
• Only works with scrolling.mode set to 'virtual'

Cascade Filtering

One of the more time-consuming PivotGrid related implementations (when you create it manually) is use of inter-dependent comboxes for data filtering. Though our PivotGrid ships with a robust filtering engine, we decided to add a "Cascading Filtering" option to the control in our v19.1 release cycle.

Cascade filters allow you to restrict the values displayed within a combo box based on values specified in a ‘master’ combo box (by setting the headerFilter.showRelevantValues to true).

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

As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for:Angular, Vue, React, jQuery,Knockout, ASP.NET MVC and .NET Core.

Test It Now (and tell us what you think)

Test-drive the public release, use the npm package:

npm install --save devextreme@19.1

As always, we’d love to hear from you – please tell us what you think about these enhancements below.