HTML5-JavaScript Pivot Grid – Enhancements (Coming soon in v16.1)

24 May 2016

In the v16.1 release, we've added three great new features to the DevExtreme JavaScript Pivot Grid.

1. Field Panel

The field panel displays fields involved in summary calculation and allows to dynamically change report options (filtering conditions and sorting order) directly in the widget:

DevExtreme Pivot Grid - Field Panel

The field panel provides you the capability to change any field option at runtime using the context menu. You can easily reach this performing the required data calculations within the 'onContextMenuPreparing' event handler. So, you can implement a custom context menu with a collection of summary types, for example, sum, average, minimum, maximum, and etc. Also, you can specify a similar event handler for the DevExtreme Pivot GridFieldChooser widget.

DevExtreme Pivot Grid - Runtime Summary

2. Charts integration

The DevExtreme Pivot Grid widget can handle processing large amounts of data easily. However, it's not easy to visualize large amounts of data. So one way to manage that is to use charts to summarize large amounts of data. And with the v16.1 release, the DevExtreme Pivot Grid can easily integrate with a chart to help you process large amounts of data and show a corresponding chart next to it!

DevExtreme Pivot Grid - Charts Integration

Simply pass a chart instance and additional settings for showing multidimensional data to the 'bindChart' method of DevExtreme Pivot Grid.

3. Layout Enhancements

Besides features mentioned above, the DevExtreme Pivot Grid widget includes some layout improvements. One of them is a tree layout mode designed for hierarchical items in a row header. By default, such items placed in row take too much space on the screen. However, using the new layout helps to optimize this area and use it more effectively.

DevExtreme Pivot Grid - Row Header Layout

The other new layout feature is relocatable data field header. Previously, data field headers could be displayed only in columns. Starting with the upcoming release, you can specify whether they are located in columns or rows.

DevExtreme Pivot Grid - Data Field Area

What do you think about these features? Drop me a line below. Thanks!


Create highly responsive web apps for touch-enabled devices and traditional desktops.

From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

Download a free and fully-functional version of DevExtreme now: Download DevExtreme

no comments
No Comments

Please login or register to post comments.