Adding igPivotView to an ASP.NET MVC Application

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

Required background

The following topics are prerequisites to understanding this topic:

• 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

This topic contains the following sections:

• Adding igPivotView to an ASP.NET MVC Application – Conceptual Overview
  • Adding igPivotView to an ASP.NET MVC application summary
  • Requirements
  • Steps
• Adding igPivotView to an ASP.NET MVC Application – Example
  • Introduction
  • Preview
  • Prerequisites
  • Steps
• Related Content
  • Topics
  • Samples

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 Ignite UI for MVC implementation 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 Ignite UI for MVC 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.

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.

• Adding igOlapFlatDataSource to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igOlapFlatDataSource control to an ASP.NET MVC application using Ignite UI for MVC.

• Adding igOlapXmlaDataSource to an ASP.NET MVC Application: This topic explains, in both conceptual and step-by-step form, how to add the igOlapXmlaDataSource control to an ASP.NET MVC application using Ignite UI for MVC.

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

• igPivotGrid Overview: 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.

• Using the Ignite UI for MVC with Xmla Data Source: This sample demonstrates using the Ignite UI for MVC igOlapXmlaDataSource control and how to use it as data source in the igPivotDataSelector and igPivotView controls.

• Using the Ignite UI for MVC with Flat Data Source: This sample demonstrates using the Ignite UI for MVC igOlapFlatDataSource control and how to use it as data source in the igPivotDataSelector and igPivotView controls.