Version

Adding igPivotGrid to an HTML Page

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:

  • Using JavaScript Resources in Ignite UI for jQuery: This topic provides general guidance on adding required JavaScript resources to use controls from the Ignite UI for jQuery library.

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

In this topic

This topic contains the following sections:

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 for jQuery™ 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 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 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
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.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

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
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.

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.

  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 for jQuery CSS files to a folder named Content/ig (For details, see the Styling and Theming 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: “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.

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.

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

View on GitHub