[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [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]Tree List
  [Expand]Card View
  [Collapse]Pivot Grid
   [Expand]Getting Started
    Integrate the PivotGrid Extension into a Project
   [Collapse]Binding to Data
     Binding to Data using Entity Framework (Code First)
     Binding to Data using Entity Framework or LINQ to SQL (Database First)
     Database Server Mode
    Main Features - PivotGrid
    Client-Side Functionality
   [Expand]UI Elements
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Query Builder
 [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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Binding to Data using Entity Framework (Code First)

The DevExpress MVC PivotGrid supports binding to a data source using the Entity Framework ORM.

If you do not yet have a database, you can code your own classes and properties that correspond to tables and columns and use them with the Entity Framework. The Entity Framework can automatically create the database for you, or drop and recreate it if the model changes. This development approach is called "Code First".

This topic describes how to bind the MVC PivotGrid to a data source using the Entity Framework and the "Code First" development approach.

Project requirements

Before you start, make sure you have the Entity Framework installed. Learn more about how to get the Entity Framework from the following MSDN tutorial: Get Entity Framework.

Your project should be prepared for using DevExpress MVC Extensions. See this topic to learn how to prepare your project: Integration into an ASP.NET MVC Project.

To implement this kind of data binding, you need to perform the following steps.

Expanded Step 1. Create a data model and a data context

The data model class (the "Product" class in this topic) is used to represent data records in a database. Each instance of a data model class will correspond to a row within a database table, and each property of the data model class will map to a column within a database table.

The image below demonstrates how the model class properties are represented within the PivotGrid.

The data context class ("ProductDbContext" in this topic) represents the Entity Framework database context, which handles fetching, storing, and updating data model class instances in a database. The data context class derives from the System.Data.Entity.DbContext base class provided by the Entity Framework.

Add the data model class with the required properties and a data context class to the data model code, as shown in the code sample below.

Expanded Step 2. Add a connection string

Create a connection string that points to your data context class and place it in the <connectionStrings> element in the Web.config file. You can learn more about connection strings from the following MSDN topic: Connection Strings.

The following is an example of a connection string for the data model created in the previous step.


Build the application before going on to the next step.

Expanded Step 3. Add the PivotGrid to the required View

Open the required View file (Index.cshtml in this topic), right-click the desired location in the Code Editor to display the Shortcut menu, and click Insert DevExpress MVC Extension...

The Insert DevExpress Extension wizard opens. Navigate to the tab with the Data extensions and select PivotGrid. Define the extension name and the partial view name. In the Model Class item, select the data model class; in the Data Context Class item, select the data context class and select the fields you want to add to the PivotGrid.

Click the "Insert" button and the PivotGrid will be added into your project. See this topic to learn more about the MVC Wizard: Insert DevExpress MVC Extension Wizard.

After these manipulations, Insert Extension Wizard generates a partial view with the PivotGrid's settings and inserts necessary code into the corresponding controller class. As a result, you have a fully functional MVC PivotGrid bound to a data source using the Entity Framework.

Is this topic helpful?​​​​​​​