Integration into the Project

  • 4 min to read

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.

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.


<head>
    ...
    @Html.DevExpress().GetScripts( 
        // ... 
        new Script { ExtensionSuite = ExtensionSuite.PivotGrid }
    )
    ...
</head>

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.


<head>
    ...
    @Html.DevExpress().GetStyleSheets( 
        // ... 
        new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid }
    )
    ...
</head>

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 MVCxPivotGrid to Microsoft SQL Server Database File topic.

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:


@Html.Action("PivotGridPartial")

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.

MVC_PivotGrid_ImplementationDetails

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):

@Html.DevExpress().PivotGrid(
    settings => {
        settings.Name = "pivotGrid";
        settings.CallbackRouteValues = new { 
            Controller = "Home", Action = "PivotGridPartial" };

        settings.Fields.Add("Extended_Price", PivotArea.DataArea);
        settings.Fields.Add("CategoryName", PivotArea.RowArea);
        settings.Fields.Add("OrderDate", PivotArea.ColumnArea)
            .GroupInterval = PivotGroupInterval.DateYear;
    }
).Bind(Model).GetHtml()

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"):

public class HomeController : Controller {
    public ActionResult Index() {
        return View(GetSalesPerson());
    }
    public ActionResult PivotGridPartial() {
        return PartialView("PivotGridPartial", GetSalesPerson());
    }
    public static IEnumerable GetSalesPerson() {
        NorthwindDataContext db = new NorthwindDataContext();
        return from salesPerson in db.SalesPersons select salesPerson;
    }
}

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.

PivotGrid_Overview_Result

NOTE

To learn about adding the PivotGrid extension with minimum or no coding, see the following tutorial: Lesson 1 - Bind MVCxPivotGrid to Microsoft SQL Server Database File.