ASP.NET MVC OLAP: Customizing the UI and PivotGrid

January 12 2017

The images in our Excel export post show a user interface that looks like Excel. They were built using two controls:

The PivotPanel provides the area where you can drag and drop fields to build views, and
The PivotGrid shows the summary data, with collapsible rows and columns, and subtotals.

But those are just examples. You have complete flexibility to combine the controls in the OLAP module to build interfaces that meet your application’s requirements.

Dashboard-style interface with pre-defined views

This simple UI shows a list of pre-defined views on the left and a PivotGrid on the right. It is easy to use on desktop or mobile devices:

Custom PivotGrid with KPI icons and colors

The PivotGrid control extends the FlexGrid, so you can customize the display of the grid cells using the formatItem event and modifying the content of each cell with complete flexibility. For example, the PivotGrid below uses colors and icons similar to the ones in Excel’s icon sets to show how sales changed from quarter to quarter:

Tabbed interface with PivotGrid, PivotChart, and Raw Data

The OLAP controls can be combined with any other HTML elements or controls on the page, providing complete flexibility when building user interfaces that are tailored for specific purposes. In example below, a column on the left of the page contains the PivotPanel used to customize the pivot view. A column on the right contains tabs that allow users to select between a PivotGrid, PivotChart, or the raw data: