Version

Configuring igPivotGrid

Topic Overview

Purpose

This topic discusses how to configure the igPivotGrid™ control.

In this topic

This topic contains the following sections:

Basic Configuration

The following table lists the basic options that need to be defined in order to display the data in a pivot table.

For the igPivotGrid:

Option Description
dataSource An instance of $.ig.OlapXmlaDataSource or $.ig.OlapFlatDataSource.

The $.ig.OlapXmlaDataSource component handles the communication with a Microsoft® SQL Server Analysis Services (SSAS) server configured with the msmdpump.dll HTTP data provider. The relevant basic settings for it are:

Option Description
serverUrl The URL of the XMLA server.
catalog The catalog name.
cube The name of the cube in the data source.
rows A list of hierarchy names separated by comma (,). These will be the hierarchies in the rows of the data source.
columns A list of hierarchy names separated by comma (,). These will be the hierarchies in the columns of the data source.
measures A list of measure names separated by comma (,). These will be the measures of the data source.

You can refer to the following basic sample with an example configuration.

The $.ig.OlapFlatDataSource component allows multi-dimensional (OLAP-like) analysis to be performed on a flat data collection. The relevant basic settings for it are:

For the OlapFlatDataSource:

Option Description
dataSource Specifies any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.
metadata An object containing processing instructions for the $.ig.DataSource data.
metadata.cube Metadata used for the creation of the cube.
metadata.cube.measuresDimension An object providing information about the measures' root node.
metadata.cube.dimensions An array of dimension metadata objects.
rows A list of hierarchy names separated by comma (,). These will be the hierarchies in the rows of the data source.
columns A list of hierarchy names separated by comma (,). These will be the hierarchies in the columns of the data source.
measures list of measure names separated by comma (,). These will be the measures of the data source.

You can refer to the following basic sample with an example configuration.

Advanced Configurations

The following sections show how to configure custom scenarios.

Custom Move Validation

The igPivotGrid allows specifying a customMoveValidation function, which allows specifying whether a move operation should be allowed or not.

The below sample demonstrates how to forbid dropping items to the columns of the PivotGrid. Also any hierarchy that contains the word "Seller" in its name will not be accepted by the drop areas in the Pivot Grid and the Data Selector.

Drag and Drop custom elements

The following steps will guide you through the process of implementing dragging and dropping of custom elements in the igPivotGrid.

Steps

  1. Define elements with the data-type and data-name attributes.

    The data-type should be set to the type of element, could be: Dimension, Hierarchy, Measure or Level. The data-name should be the related value. For exampe:

          <div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable"
              data-type="Hierarchy"
              data-name="[Seller].[Seller]"><span>Hierarchy: Seller</span></div>
         <div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable"
             data-type="Measure"
             data-name="[Measures].[UnitsSold]"><span>Measure: Units Sold</span></div>
    
  2. Make the defined elements draggable using jQuery UI's draggable Interactions.

You can refer to the below sample with a similar configuration.

Expand Members

In order to programatically expand members in the Pivot Grid the expandTupleMember method can be used. The below sample demonstrates how to use the method when the grid's data source is initialized on the dataSourceInitialized event handler.

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • Binding to Flat Data Source: This sample demonstrates how to bind the igPivotGrid to an igOlapFlatDataSource and uses an igPivotDataSelector for data selection.

  • Using the Ignite UI for MVC with Xmla Data Source: This sample demonstrates how to use the Ignite UI for MVC igPivotGrid with igOlapXmlaDataSource.

  • Sorting: This sample demonstrates how to enable sorting in the igPivotGrid and how to apply sorting for specific levels upon initialization.

  • Layout Modes: This sample compares the layout of the igPivotGrid when compact column and row headers are enabled or disabled.

View on GitHub