Infragistics(R) IgniteUI
Adding igPivotDataSelector 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 igPivotDataSelector™ control to an HTML page.

Required background

The following topics are prerequisites to understanding this topic:

Topic

Purpose

This topic provides some general information on the Ignite UI® library.

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

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


In this topic


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.

RequirementRequired Resources

Description

What you need to do…

jQuery and jQuery UI JavaScript resources

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

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

Combo box control (igCombo™)

infragistics.ui.tree.js

The igTree™ control

infragistics.ui.pivot.shared.js

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

Step

Description

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 IgniteUI CSS files to a folder named Content/ig (For details, see the Styling and Theming Ignite UI topic).

C. Add the IgniteUI JavaScript files to a folder named Scripts/ig in your web site or application (For details, see the Using JavaScript Resources in Ignite UI 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.

Topic

Purpose

Adding igPivotDataSelector to an ASP.NET MVC Application

This topic explains both conceptually and with a code example how to add the igPivotDataSelector to an ASP.NET MVC Application.


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.