Infragistics(R) IgniteUI
Adding igPivotGrid to an HTML Page
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

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

Required background

The following topics are prerequisites to understanding this topic:

Topic

Purpose

This topic provides general guidance on adding required JavaScript resources to use controls from the Ignite UI library.

This topic provides conceptual information about the igPivotGrid control including its main features, minimum requirements and user functionality.


In this topic


Adding igPivotGrid to an HTML Page – Conceptual Overview

Adding igPivotGrid summary

The igPivotGrid control operates using an instance of either the igOlapFlatDataSource™ or igOlapXmlaDataSource™ component. Therefore, when adding the igPivotGrid 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 igPivotGrid. The data source setting is the only mandatory option to set when initializing the igPivotGrid.

Requirements

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

Required Resources

Description

What you need to do…

jQuery and jQuery UI JavaScript resources

Ignite UI is built on top of the following frameworks:

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

Modernizr library (Optional)

The Modernizr library is used by the igPivotGrid 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.

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

General igPivotGrid JavaScript Resources

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

  • (Recommended) Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
  • Load the required resources manually. You need to use the dependencies listed in the table below.

The following table lists the Ignite UI library dependences related to the igPivotGrid 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

Ignite UI 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 shared code

infragistics.ui.scroll.js

A scroll helper which is internally used

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 shared code for pivot components

infragistics.ui.pivotgrid.js

The igPivotGrid control


Add one of the following:

  • 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 library. The theme file is:

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

igPivotGrid CSS resources file

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.grid.css
  • <IG CSS root>/structure/modules/infragistics.ui.pivot.css

Add style reference to the file in your page.


 

Note:

It is recommended to use the igLoader component to load JavaScript and CSS resources. In the online Ignite UI Samples Browser, you can find some specific examples on how to use the igLoader with the igPivotGrid component.

Steps

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

1. Adding references to the required resources
2. Adding the HTML markup required by the igPivotGrid
3. Adding a data source

4. Initializing igPivotGrid


Adding igPivotGrid to an HTML Page Procedure

Introduction

The procedure below demonstrates, with code examples, how to add the igPivotGrid control 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 the required resources
2. Adding the HTML markup required by the igPivotGrid
3. Adding a data source

4. Initializing igPivotGrid

Steps

The following steps demonstrate how to add a jQuery igPivotGrid.

Step

Description

1. Add references to the required resources.

1. Organize the required files.

A. Add the jQuery, jQuery UI, and Modernizr JavaScript resources to a folder named Scripts in the directory where your web page resides.

B. Add the Ignite UI CSS files to a folder named Content/ig (For details, see the Styling and Theming IgniteUI topic).

C. Add the Ignite UI JavaScript files to a folder named Scripts/ig in your web site or application (For details, see the Using JavaScript Resources in Ignite UI 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: “igPivotGrid,igOlapXmlaDataSource"
    });
<script>
2. Add the HTML markup required by the igPivotGrid. Create a table tag with an id of “pivotGrid” in your HTML page.

In HTML:

<table id="pivotGrid"></table>
3. Add a data source.

Add the data source declaration.

In JavaScript:

$.ig.loader(function () {

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;

4. Initialize igPivotGrid.

Initialize the igPivotGrid control.

In JavaScript:



$.ig.loader(function () {
// add data source declaration here


$("#pivotGrid").igPivotGrid({ dataSource: dataSource }); });

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

In JavaScript:

$("#pivotGrid").igPivotGrid({
      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]"
}});



Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

Adding igPivotGrid Using the ASP.NET MVC Helper

This topic demonstrates how to add the igPivotGrid™ control to an ASP.NET MVC application using the ASP.NET MVC helper.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample demonstrates how to bind the igPivotGrid to an igOlapFlatDataSource and uses an igPivotDataSelector for data selection.

This sample demonstrates how to bind the igPivotGrid to an igOlapXmlaDataSource and uses an igPivotDataSelector for selection.