How to: Customize Cell Appearance via Templates

  • 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

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 =
                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);

                    TableRow row = new TableRow();

                    TableCell cell = new TableCell();
                    cell.Style.Add(HtmlTextWriterStyle.Padding, "0px");
                    cell.Width = Unit.Pixel(value);
                    cell.Height = Unit.Pixel(20);
                    if (templateContainer.Item.RowValueType == 
                        cell.BackColor = Color.Blue;
                        cell.BackColor = Color.Red;
                    if (templateContainer.Item.RowValueType == 
                        cell.BackColor = Color.Green;

                    cell = new TableCell();
                    cell.Text = templateContainer.Item.Text;
                    cell.Wrap = false;
                else {
                            new LiteralControl(templateContainer.Text));