Version

Adding igPivotDataSelector to an HTML Page

Topic Overview

Purpose

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

Required background

The following topics are prerequisites to understanding this topic:

In this topic

This topic contains the following sections:

Adding igPivotDataSelector – Conceptual Overview

Adding igPivotDataSelector summary

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

Requirements

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

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 igPivotDataSelector 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 igPivotDataSelector JavaScript Resources The igPivotDataSelector 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:
  • (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 for jQuery library dependences related to the igPivotDataSelector 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.tree.js The igTree™ control
infragistics.ui.pivot.shared.js Ignite UI for jQuery shared code for pivot components
infragistics.ui.pivotdataselector.js The igPivotDataSelector™ 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 for jQuery library. The theme file is:
  • <IG CSS root>/themes/Infragistics/infragistics.theme.css
igPivotDataSelector 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.combo.css
  • <IG CSS root>/structure/modules/infragistics.ui.tree.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 igPivotDataSelector to an HTML page.

  1. Adding references to required resources

  2. Adding HTML markup required by the igPivotDataSelector

  3. Adding a data source

  4. Initializing the igPivotDataSelector

Adding igPivotDataSelector – Procedure

Introduction

The procedure below demonstrates, with code examples, how to add the igPivotDataSelector 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 igPivotDataSelector

  3. Adding a data source

  4. Initializing the igPivotDataSelector

Steps

The following steps demonstrate how to add a jQuery igPivotDataSelector.

  1. 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 topic).

    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: “igPivotDataSelector,igOlapXmlaDataSource"
     });
 <script>

  2. Add HTML markup required by the igPivotDataSelector.

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

    In HTML:

     <div id="dataSelector"></div>

  3. Add a data source.

    A sample 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 the igPivotDataSelector

    In order for the igPivotDataSelector to be loaded, the following code must be added.

    In JavaScript:

     $("#dataSelector").igPivotDataSelector({
     dataSource: dataSource 
 });

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

    In JavaScript:

     $("#dataSelector").igPivotDataSelector({
       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 samples 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