Infragistics(R) IgniteUI
Adding igPivotView to an ASP.NET MVC Application
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 igPivotView™ control to an ASP.NET MVC application using the ASP.NET MVC helper.

Required background

The following topics are prerequisites to understanding this topic:

Topic

Purpose

igPivotView Overview

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

Adding igPivotView to an HTML Page

This topic explains, in both conceptual and step-by-step form, how to add the igPivotView control to an HTML page. This topic provides the complete listing of the required JavaScript resource files.


In this topic


Adding igPivotView to an ASP.NET MVC Application – Conceptual Overview

Adding igPivotView to an ASP.NET MVC application summary

The igPivotView is a client-side component accompanied by an ASP.NET MVC helper that allows the component to be used in the CS/VB code of an MVC View. It allows also consuming data from the View’s Model (using igOlapFlatDataSource™). When using the ASP.NET MVC helper for the igPivotView, there are two ways to bind it to data:

  • By configuring a data source.

This is done by setting the required DataSourceOptions (used to create a data source object). This approach is explained in this topic.

  • By referencing a pre-configured data source.

This is done by providing the ID of a pre-configured data source instance (DataSourceID) (as explained in Adding igOlapXmlaDataSource to an ASP.NET MVC Application and Adding igOlapFlatDataSource to an ASP.NET MVC Application).

Defining the igPivotView in the View is achieved by setting the required properties using methods that always return the same object that called them. This allows for chaining syntax to be used for setting all required properties. For complex objects such as DataSourceOptions, lambda expression builders are used in order to achieve this kind of syntax.

Requirements

Following are the general requirements for adding igPivotView to an ASP.NET MVC application:

  • A reference to the Infragistics® namespace
  • The required JavaScript files added to your application (For the complete listing, refer to Adding igPivotView to an HTML Page.)

Steps

Following are the general conceptual steps for adding igPivotView to an ASP.NET MVC application.

1. Adding a reference to the Infragistics namespace
2. Adding a reference to the required JavaScript resources

3. Adding the igPivotView and configuring the data source


Adding igPivotView to an ASP.NET MVC Application – Example

Introduction

The procedure below demonstrates how to add the igPivotView control to an ASP.NET MVC application. Code examples for both approaches for adding igPivotView – by setting the DataSourceOptions and by setting the DataSourceID, are available. The required resources in this example are referred to automatically with the Infragistics Loader.

Preview

The following screenshot is a preview of the final result.

Prerequisites

To complete the procedure, you need the following:

  • An ASP.NET MVC application
  • Reference to the Infragistics.Web.Mvc.dll assembly added to the application project
  • The Adventure Works sample database deployed on an SQL server (http://sampledata.infragistics.com is used in this example)
Note: If you want to use the remote xmla data provider (XmlaDataSourceAction) MVC 3 or higher is required.

Steps

The following steps demonstrate how to add an igPivotView to an ASP.NET MVC application.

Step

Description

1. Add a reference to the Infragistics namespace.

Add the Infragistics.Web.Mvc namespace to your View code.

In ASPX:

<%=Import Namespace=”Infragistics.Web.Mvc” %>
2. Add a reference to the required JavaScript resources. 1. Add script reference to the igLoader.

Add the following script reference to the head section of the View.

In ASPX:

<script src="[path to js folder]/infragistics.loader.js"></script>

2. Add the igLoader definition.

The following code loads the required resources using the Infragistics Loader.

In ASPX:

<%=Html.Infragistics()
        .Loader()
        .ScriptPath("[js path]")
        .CssPath("[css path]")
        .Render()
%>
3. Add the igPivotView and configure the data source.

The following code adds an igPivotView bound to an igOlapXmlaDataSource™:

In ASPX:

<%= Html.Infragistics().PivotGrid()
.DataSourceOptions(
    dataSourceOptions => dataSourceOptions
        .Columns("[Product].[Product Categories]")
        .Rows("[Sales Territory].[Sales Territory]")
        .Measures("[Measures].[Internet Order Count]")
        .XmlaOptions(
        xmlaOptions => xmlaOptions
            .ServerUrl("http://sampledata.infragistics.com/olap/msmdpump.dll")
            .Catalog("Adventure Works DW Standard Edition")
            .Cube("Adventure Works")
            .MeasureGroup("Internet Sales"))).Render()
%>

If you prefer to use an already preconfigured data source you need to set the DataSourceID property . The code example below assumes that an igOlapXmlaDataSource or igOlapFlatDataSource with ID of “olapDataSource” is present in the view. (For details, refer to Adding igOlapXmlaDataSource to an ASP.NET MVC Application and Adding igOlapFlatDataSource to an ASP.NET MVC Application).

In ASPX:

<%= Html.Infragistics().PivotGrid()
.DataSourceID(“olapDataSource”)
.Render()
%>


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic explains, in both conceptual and step-by-step form, how to add the igOlapFlatDataSource control to an ASP.NET MVC application using ASP.NET MVC helper.

This topic explains, in both conceptual and step-by-step form, how to add the igOlapXmlaDataSource control to an ASP.NET MVC application using ASP.NET MVC helper.

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

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


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample demonstrates using the ASP.NET MVC Helper for the igOlapXmlaDataSource control and how to use it as data source in the igPivotDataSelector and igPivotView controls.

This sample demonstrates using the ASP.NET MVC Helper for the igOlapFlatDataSource control and how to use it as data source in the igPivotDataSelector and igPivotView controls.