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
   [Collapse]Getting Started
     Lesson 1 - Bind a Pivot Grid to an MDB Database
     Lesson 2 - Bind a Pivot Grid to an OLAP Data Source
     Tutorial Videos
    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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Bind a Pivot Grid to an MDB Database

This topic describes how to add the ASP.NET MVC PivotGrid extension to a Web application, bind the extension to a data source and create pivot grid fields mapped to appropriate fields from a database. In this example, a local Northwind database is used.

Lesson Requirements

Before you start, make sure the following requirements are met.

  • You have the Entity Framework installed. Learn more from the following MSDN tutorial: Get Entity Framework.
  • You have a local Northwind database installed. To learn how to attach the database, see the following MSDN topic: Attach a Database. You can find the database file at C:\Users\Public\Documents\DevExpress Demos 17.2\Components\Data\NWind.mdf.

To create a simple ASP.NET MVC application with the PivotGrid extension, follow the steps below.

Expanded Step 1-6. Create an ASP.NET MVC Application

  1. Run Visual Studio.
  2. Create a new project by selecting File | New | Project… In the invoked New Project dialog, select the Web section and choose the DevExpress v17.2 Template Gallery.

  3. In the invoked DevExpress Template Gallery, go to the ASP.NET category and select Web Application.

  4. In the invoked DevExpress ASP.NET MVC Project Wizard, go to the Choose Layout page and select Standard.

  5. On the Choose Theme page, you can select a theme that will be used by default. In this tutorial, the Metropolis theme is used.

  6. To create an MVC application, click Create Project.

Expanded Step 7-8. Create a Data Model

  1. Create a data model based on the local Northwind database (see Lesson Requirements). To do this, right-click the Models folder and add a new ADO.NET Entity Data Model with the nwindDataContext item name. The following MSDN walkthrough demonstrates how to reverse engineer a model from an existing database: Entity Framework Database First. In this tutorial, the SalesPerson view is selected to create the data model.

  2. The image below shows the created nwindDataContext data context used in this tutorial.

    Rebuild the solution before proceeding to the next step.

Expanded Step 9-11. Add the PivotGrid Extension to the MVC Application

  1. Switch to Views | Home | Index.cshtml, choose the place in code where you would like to insert the extension, right-click the desired location to display a menu, and select Insert DevExpress MVC Extension...

  2. This invokes the Insert DevExpress Extension wizard. Go to the Data tab and select PivotGrid. In the Model class combo box, select the previously created SalesPerson data model; in the Data context class item, select the created nwindDataContext data context class.

    Then select the fields you want to add to the PivotGrid. In this tutorial, the following fields are selected: CategoryName, Country, Extended_Price, ProductName, Sales_Person.

    Click Insert. After these manipulations, the Insert Extension Wizard generates a partial view with PivotGrid settings and inserts the required code into the corresponding controller class.

  3. Modify the Views | Shared | _Layout.cshtml file. Attach the stylesheet and script as shown in the code snippet below.

After performing this step, you have a fully functional MVC PivotGrid bound to a data source.

Expanded Step 12-13. Configure Pivot Grid Fields

  1. To configure a PivotGrid layout, open the automatically generated Views | Home | _PivotGridPartial.cshtml file containing PivotGrid settings. Specify fields' PivotGridFieldBase.Area and PivotGridFieldBase.AreaIndex properties to change the fields' location and order. To change the fields' captions, use the PivotGridFieldBase.Caption property.

    The code snippet below demonstrates how to configure the fields' properties.

    Configure the PivotGrid fields as described below.

    PivotGridFieldBase.FieldName

    PivotGridFieldBase.Caption

    PivotGridFieldBase.Area

    PivotGridFieldBase.AreaIndex

    CategoryName Category PivotArea.RowArea 0
    Country Country PivotArea.ColumnArea 0
    Extended_Price Extended Price PivotArea.DataArea 0
    ProductName Product PivotArea.RowArea 1
    Sales_Person Sales Person PivotArea.ColumnArea 1
  2. Run the project to see the result.

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