We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Adding igPivotView to an HTML Page

Topic Overview

Purpose

This topic explains, in both conceptual and step-by-step form, how to add the igPivotView™ control to an HTML page.

Required background

The following topics are prerequisites to understanding this topic:

Using JavaScript Resources in Ignite UI for jQuery: This topic provides general guidance on adding the required JavaScript resources for using the controls from the Ignite UI for jQuery® library.
igPivotView Overview: This topic provides conceptual information about the igPivotView control including its main features, requirements, and user functionality.

In this topic

This topic contains the following sections:

Adding igPivotView – Conceptual Overview

Adding igPivotView summary

The igPivotView operates using an instance of igOlapFlatDataSource™ or igOlapXmlaDataSource™. Therefore, when adding the igPivotView to an HTML page, you need to provide a pre-configured data source instance or specify the required options so that one could be created internally.

The data source is specified through either the dataSource parameter or the dataSourceOptions property of the igPivotView. The data source setting is the only mandatory option to set when initializing the igPivotView.

Requirements

The following table summarizes the requirements for using the igPivotView control.

Requirement / Required Resources Description What you need to do…

jQuery and jQuery UI JavaScript resources

Ignite UI for jQuery™ is built on top of these frameworks:

Add script references to both libraries in the <head> section of your page.

Modernizr library (Optional)

The Modernizr library is used by the igPivotView to detect browser and device capabilities. It is not mandatory and, if not included, the control will behave as if in a normal desktop environment with an HTML5 compatible browser.

Modernizr

Add a script reference to the library in the <head> section of your page.

General igPivotView JavaScript Resources

The igPivotView functionality of the Ignite UI for jQuery library is distributed across several files. You can load the required resources in one of the following ways:

Including a custom JavaScript file: This is the recommended approach to reference Ignite UI for jQuery JavaScript files. You can create a custom download of selected Ignite UI for jQuery controls and components.
Using Infragistics Loader: The Infragistics Loader can be used to resolve all the Infragistics resources (styles and scripts)
Load the required resources manually. You need to use the dependencies listed in the table below.

The following table lists the Ignite UI for jQuery library dependences related to the igPivotView control. These resources need to be referred to explicitly if you chose to load resources manually (i.e. not to use igLoader).

JavaScript Resource	Description
`infragistics.util.js` `infragistics.util.jquery.js`	Ignite UI for jQuery utilities
(Conditional - if using `igOlapFlatDataSource`) `infragistics.datasource.js`	The `igDataSource`™ component
`infragistics.olapflatdatasource.js` or `infragistics.olapxmladatasource.js`	Data source framework
`infragistics.templating.js`	Template engine (`igTemplate`™)
`infragistics.ui.shared.js`	Ignite UI for jQuery shared code
`infragistics.ui.scroll.js`	A scroll helper which is internally used
`infragistics.ui.combo.js`	Combo box control (`igCombo`™)
`infragistics.ui.splitter.js`	The `igSplitter`™ control
`infragistics.ui.tree.js`	The `igTree`™ control
`infragistics.ui.grid.framework.js`	The `igGrid`™ control
`infragistics.ui.grid.multicolumnheaders.js`	The multi-column headers feature for the `igGrid` control
`infragistics.ui.pivot.shared.js`	Ignite UI for jQuery shared code for pivot components
`infragistics.ui.pivotgrid.js`	The `igPivotGrid` control
`infragistics.ui.pivotdataselector.js`	The `igPivotDataSelector`™ control
`infragistics.ui.pivotview.js`	The `igPivotView`™ control

Add one of the following:

A reference to custom JavaScript file
A reference to igLoader
A reference to all the required JavaScript files (listed in the table on the left).

IG Theme (Optional)

This theme contains the visual styles for the Ignite UI for jQuery library. The theme file is:

<IG CSS root>/themes/Infragistics/infragistics.theme.css

igPivotView CSS resources files

The styles from the following CSS file are used for rendering various elements of the control:

<IG CSS root>/structure/modules/infragistics.ui.shared.css
<IG CSS root>/structure/modules/infragistics.ui.combo.css
<IG CSS root>/structure/modules/infragistics.ui.splitter.css
<IG CSS root>/structure/modules/infragistics.ui.tree.css
<IG CSS root>/structure/modules/infragistics.ui.grid.css
<IG CSS root>/structure/modules/infragistics.ui.pivot.css

Add style reference to the file in your page.

Steps

Following are the general conceptual steps for adding the igPivotView to an HTML page.

1. Adding references to required resources

2. Adding HTML markup required by the igPivotView

3. Adding a data source

4. Initializing the igPivotView

Adding igPivotView – Procedure

Introduction

The procedure below demonstrates, with code examples, how to add the igPivotView component to an HTML application visualizing the Adventure Works sample database. The procedure uses the Infragistics Loader (igLoader) to reference the required resources, which is the recommended option.

Preview

The following screenshot is a preview of the final result.

Prerequisites

To complete the procedure, you need the following:

The Adventure Works sample database.
An instance of $.ig.OlapXmlaDataSource object or $.ig.OlapFlatDataSource object

Overview

1. Adding references to required resources

2. Adding HTML markup required by the igPivotView

3. Adding a data source

4. Initializing the igPivotView

Steps

The following steps demonstrate how to add a jQuery igPivotView.

Add references to required resources.
1. Organize the required files.
  
  A. Add the jQuery, jQueryUI, and Modernizr JavaScript resources to a folder named Scripts in the directory where your web page resides.
  
  B. Add the Ignite UI for jQuery CSS files to a folder named Content/ig (For details, see the Styling and Theming in Ignite UI for jQuery topic).
  
  C. Add the Ignite UI for jQuery JavaScript files to a folder named Scripts/ig in your web site or application (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).
2. Add the references to the required JavaScript libraries. Add references to the jQuery, jQuery UI and Modernizr libraries to the <head> section of your page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/jquery.js"></script>
 <script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
 <script  type="text/javascript" src="Scripts/modernizr.js"></script>
```
3. Add a reference to igLoader.Include the igLoader script in the page:
  
  In HTML:
```
 <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
```
4. Load the required resources.
  
  Instantiate igLoader:
  
  In HTML:
```
 <script type="text/javascript">
     $.ig.loader({
         scriptPath: "Scripts/ig/",
         cssPath: "Content/ig/",
         resources: “igPivotView,igOlapXmlaDataSource"
     });
 <script>
```
Add HTML markup required by the igPivotView.

Create a div tag with an id of “dataSelector” in your HTML page.

In HTML:
```
 <div id="pivotView"></div>
```

Add a data source.

In the igLoader’s ready event handler, add the data source declaration:

In JavaScript:

 var dataSource = new $.ig.OlapXmlaDataSource({
     serverUrl: "http://sampledata.infragistics.com/olap/msmdpump.dll",
     catalog: "Adventure Works DW Standard Edition",
     cube: "Adventure Works",
     measureGroup: "Internet Sales",
     rows: "[Sales Territory].[Sales Territory]",
     columns: "[Product].[Product Categories]",
     measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
 });

For this data source to work correctly under IE, before adding the data source declaration, you need to set the jQuery cross-origin requests support to true:

In JavaScript:

 $.support.cors = true;

Initialize the igPivotView

In order for the igPivotView to be loaded, the following code must be added after the data source declaration.

In JavaScript:

 $("#pivotView").igPivotView({
 dataSource: dataSource 
 });

Following is the alternative (direct) way to specify a data source using the dataSourceOptions property of the igPivotView. (See Adding igPivotView summary.)

In JavaScript:

 $("#dataSelector").igPivotView({
       dataSourceOptions: {
        xmlaOptions: {
           serverUrl: " http://sampledata.infragistics.com/olap/msmdpump.dll ",
           catalog: "Adventure Works DW Standard Edition ",
           cube: "Adventure Works",
           measureGroup: "Internet Sales",
        }
        rows: "[Sales Territory].[Sales Territory]",
        columns: "[Product].[Product Categories]",
        measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"      
     }
 });

Ignite UI | Help Topics

Adding igPivotView to an HTML Page

Topic Overview

Purpose

Required background

In this topic

Adding igPivotView – Conceptual Overview

Adding igPivotView summary

Requirements

Steps

Adding igPivotView – Procedure

Introduction

Preview

Prerequisites

Overview

Steps

Related Content

Topics

Samples