aspnet-116120-aspnet-mvc-extensions-pivot-grid-integrate-the-pivotgrid-extension-into-a-project.md
This topic describes specifics of integrating the PivotGrid extension into an ASP.NET MVC web application.
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.
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>
<head>
...
@Html.DevExpress().GetScripts(
' ...
New Script With { .ExtensionSuite = ExtensionSuite.PivotGrid }
)
...
</head>
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>
<head>
...
@Html.DevExpress().GetStyleSheets(
' ...
New StyleSheet With { .ExtensionSuite = ExtensionSuite.PivotGrid }
)
...
</head>
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.
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")
@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.
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()
@Html.DevExpress().PivotGrid(Sub(settings)
settings.Name = "PivotGrid"
settings.CallbackRouteValues = New With {Key.Controller = "Home", Key.Action = "PivotGridPartial"}
settings.Fields.Add(Sub(field)
field.Area = PivotArea.DataArea;
field.FieldName = "Extended_Price"
End Sub)
settings.Fields.Add(Sub(field)
field.Area = PivotArea.RowArea
field.FieldName = "CategoryName"
End Sub)
settings.Fields.Add(Sub(field)
field.Area = PivotArea.ColumnArea
field.FieldName = "OrderDate"
field.GroupInterval = PivotGroupInterval.DateYear
End Sub)
End Sub).BindToOLAP(PivotGridOLAPHelper.OLAPConnectionString).GetHtml()
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;
}
}
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
Return View(GetSalesPerson())
End Function
Public Function PivotGridPartial() As ActionResult
Return PartialView("PivotGridPartial", GetSalesPerson())
End Function
Public Shared Function GetSalesPerson() As IEnumerable
Dim db As New NorthwindDataContext()
Return _
From salesPerson In db.SalesPersons _
Select salesPerson
End Function
End Class
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 MVCxPivotGrid to Microsoft SQL Server Database File.