This topic discusses how to configure the igPivotGrid
™ control.
This topic contains the following sections:
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.
The following sections show how to configure custom scenarios.
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.
The following steps will guide you through the process of implementing dragging and dropping of custom elements in the igPivotGrid.
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>
Make the defined elements draggable using jQuery UI's draggable Interactions.
You can refer to the below sample with a similar configuration.
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.
The following topics provide additional information related to this topic.
Adding igPivotGrid to an HTML Page: This topic demonstrates how to add the igPivotGrid
to an HTML page.
Adding igPivotGrid to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igPivotGrid
control to an ASP.NET MVC application.
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