This example shows a share of sold units quantity per salesperson. This report contains absolute and percent values, and their graphical representation.The content of pivot grid cells is replaced via templates, as described below:1. A class that implements the ITemplate interface is created.
- An instance of this class is created and assigned to the ASPxPivotGrid.CellTemplate property.The ASPxPivotGrid passes an PivotGridCellTemplateContainer object to the ITemplate.InstantiateIn method. The PivotGridCellTemplateContainer.Value and Text properties contain the current cell's value and display text, respectively.When implementing the InstantiateIn method, a web control is created to be rendered instead of the cell's content. This control is added to the PivotGridCellTemplateContainer.Controls collection.To render a simple text, a LiteralControl is added to the PivotGridCellTemplateContainer.Controls collection.
View Example
using System;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxPivotGrid;
using DevExpress.XtraPivotGrid;
namespace CellTemplates {
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
ASPxPivotGrid1.CellTemplate = new CellTemplate();
}
class CellTemplate : ITemplate {
void ITemplate.InstantiateIn(Control container) {
PivotGridCellTemplateContainer templateContainer =
(PivotGridCellTemplateContainer)container;
PivotGridField field = templateContainer.DataField;
if (field != null && field.Caption == "Percents") {
int value = Convert.ToInt32(Convert.ToDecimal(
templateContainer.Value) * 350);
Table table = new Table();
table.Width = Unit.Pixel(400);
templateContainer.Controls.Add(table);
TableRow row = new TableRow();
table.Controls.Add(row);
TableCell cell = new TableCell();
cell.Style.Add(HtmlTextWriterStyle.Padding, "0px");
cell.Width = Unit.Pixel(value);
cell.Height = Unit.Pixel(20);
if (templateContainer.Item.RowValueType ==
PivotGridValueType.Total)
cell.BackColor = Color.Blue;
else
cell.BackColor = Color.Red;
if (templateContainer.Item.RowValueType ==
PivotGridValueType.GrandTotal)
cell.BackColor = Color.Green;
row.Controls.Add(cell);
cell = new TableCell();
cell.Text = templateContainer.Item.Text;
cell.Wrap = false;
row.Controls.Add(cell);
}
else {
templateContainer.Controls.Add(
new LiteralControl(templateContainer.Text));
}
}
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="CellTemplates._Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxPivotGrid.v13.1, Version=13.1.8.0,
Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxPivotGrid"
TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server"
DataSourceID="AccessDataSource1">
<Fields>
<dx:PivotGridField ID="fieldCountry" Area="ColumnArea" AreaIndex="0"
FieldName="Country">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldUnitPrice" Area="DataArea" AreaIndex="0"
FieldName="UnitPrice">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldQuantity" Area="DataArea" AreaIndex="1"
FieldName="Quantity">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldSalesperson" Area="RowArea" AreaIndex="0"
FieldName="Salesperson">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldPercents" Area="DataArea" AreaIndex="2"
Caption="Percents" FieldName="Quantity"
SummaryDisplayType="PercentOfColumn">
</dx:PivotGridField>
</Fields>
</dx:ASPxPivotGrid>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [City], [Region], [Country],
[UnitPrice], [Quantity], [Salesperson]
FROM [Invoices]">
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
Imports Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web.ASPxPivotGrid
Imports DevExpress.XtraPivotGrid
Namespace CellTemplates
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
ASPxPivotGrid1.CellTemplate = New CellTemplate()
End Sub
Private Class CellTemplate
Implements ITemplate
Private Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
Dim templateContainer As PivotGridCellTemplateContainer = CType(container, PivotGridCellTemplateContainer)
Dim field As PivotGridField = templateContainer.DataField
If field IsNot Nothing AndAlso field.Caption = "Percents" Then
Dim value As Integer = Convert.ToInt32(Convert.ToDecimal(templateContainer.Value) * 350)
Dim table As New Table()
table.Width = Unit.Pixel(400)
templateContainer.Controls.Add(table)
Dim row As New TableRow()
table.Controls.Add(row)
Dim cell As New TableCell()
cell.Style.Add(HtmlTextWriterStyle.Padding, "0px")
cell.Width = Unit.Pixel(value)
cell.Height = Unit.Pixel(20)
If templateContainer.Item.RowValueType = PivotGridValueType.Total Then
cell.BackColor = Color.Blue
Else
cell.BackColor = Color.Red
End If
If templateContainer.Item.RowValueType = PivotGridValueType.GrandTotal Then
cell.BackColor = Color.Green
End If
row.Controls.Add(cell)
cell = New TableCell()
cell.Text = templateContainer.Item.Text
cell.Wrap = False
row.Controls.Add(cell)
Else
templateContainer.Controls.Add(New LiteralControl(templateContainer.Text))
End If
End Sub
End Class
End Class
End Namespace
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb"
Inherits="CellTemplates._Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxPivotGrid.v13.1, Version=13.1.4.0,
Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxPivotGrid"
TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server"
DataSourceID="AccessDataSource1">
<Fields>
<dx:PivotGridField ID="fieldCountry" Area="ColumnArea" AreaIndex="0"
FieldName="Country">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldUnitPrice" Area="DataArea" AreaIndex="0"
FieldName="UnitPrice">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldQuantity" Area="DataArea" AreaIndex="1"
FieldName="Quantity">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldSalesperson" Area="RowArea" AreaIndex="0"
FieldName="Salesperson">
</dx:PivotGridField>
<dx:PivotGridField ID="fieldPercents" Area="DataArea" AreaIndex="2"
Caption="Percents" FieldName="Quantity"
SummaryDisplayType="PercentOfColumn">
</dx:PivotGridField>
</Fields>
</dx:ASPxPivotGrid>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [City], [Region], [Country],
[UnitPrice], [Quantity], [Salesperson]
FROM [Invoices]">
</asp:AccessDataSource>
</div>
</form>
</body>
</html>