Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Collapse]Pivot Grid
   [Expand]Getting Started
    Integrate the PivotGrid Extension into a Project
   [Expand]Binding to Data
    Main Features - PivotGrid
    Client-Side Functionality
   [Expand]UI Elements
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Integrate the PivotGrid Extension into a Project

This topic describes specifics of integrating the PivotGrid extension into an ASP.NET MVC web application.

Requirements

Before you begin, make sure your project is prepared to use DevExpress ASP.NET MVC Extensions. See this topic to learn more : Integration into an ASP.NET MVC Project.

Expanded Attach Required JavaScript Files

The PivotGrid extension requires you to attach a specific PivotGrid JavaScript file. The following code snippet shows how to attach the PivotGrid specific script using the ExtensionsFactory.GetScripts method call.

Expanded Attach Required Style Sheets

To attach required style sheets, use the ExtensionsFactory.GetStyleSheets extension method within the View page's head (recommended) or body tag, as demonstrated in the code sample below.

Expanded Add a Data Model

To bind the PivotGrid extension to data, create a data model. The data model class is used to represent data records in a database. Each instance of the data model class will correspond to a row within a database table and each property of this data model will be mapped to a column within the database table.

The PivotGrid extension can be bound to an IQueriable or IEnumerable collection of model class instances. To learn more about various approaches to binding the PivotGrid to data, refer to the Binding to Data documentation section.

To learn how to create a data model, see step 7 in the Lesson 1 - Bind a Pivot Grid to an MDB Database topic.

Expanded Add View and Extension Code

View is a component that displays the application's user interface (UI). In the View code, place a link to the PartialView that will contain the PivotGrid declaration.

The View code:

Now, declare the PivotGrid code in the PartialView. To do this, invoke the ExtensionsFactory.PivotGrid helper method. This method returns the PivotGrid extension that is implemented by the PivotGridExtension class.

To get access to all the PivotGrid extension settings, pass the PivotGridSettings object to the ExtensionsFactory.PivotGrid helper method as a parameter. In addition, define how callbacks will be routed back to your controller using the PivotGridSettings.CallbackRouteValues property.

View code (Razor):

Expanded Add Controller Code

Controller is a component that handles user interaction, works with the data model, and ultimately selects a view to render that displays the UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

In the controller code, define the action method that will handle PivotGrid callbacks. This method should return a PartialView with the PivotGrid extension and pass the data model to the View.

Controller ("Home"):

In this example, the GetSalesPerson method returns a collection of items that will be displayed within a PivotGrid. The controller passes this collection to the View as a Model. In the View code, the PivotGrid is bound to the Model object using the PivotGridExtension.Bind method.

The code result is demonstrated in the image below.

Note

To learn about adding the PivotGrid extension with minimum or no coding, see the following tutorial: Lesson 1 - Bind a Pivot Grid to an MDB Database.

How would you rate this topic?​​​​​​​