ContextQMD
Back to Devexpress

How to: Customize Cell Appearance via Templates

aspnet-7246-components-pivot-grid-examples-appearance-how-to-customize-cell-appearance-via-templates.md

latest9.9 KB
Original Source

How to: Customize Cell Appearance via Templates

  • Dec 17, 2020
  • 4 minutes to read

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.

  1. 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

csharp
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));
                }
            }
        }
    }
}
aspx
<%@ 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>
vb
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
aspx
<%@ 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>