New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Conditional Formatting

empty
TotalPriceQuantityYearQuarter
CategoryProductName
empty
19971997 Sum of TotalPrice1997 Sum of Quantity 19981998 Sum of TotalPrice1998 Sum of QuantityTotal Sum of TotalPriceTotal Sum of Quantity
Quarter 1Quarter 2Quarter 3Quarter 4Quarter 1Quarter 2Quarter 3Quarter 4
Sum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of QuantitySum of TotalPriceSum of Quantity
empty
BeveragesChai
Chang
Chartreuse verte
Côte de Blaye
Guaraná Fantástica
Ipoh Coffee
Lakkalikööri
Laughing Lumberjack Lager
Outback Lager
Rhönbräu Klosterbier
Grand Total
empty
$1,440.0080$633.6042$1,440.0080$1,782.00102$5,295.60304$1,872.00104$2,232.00124$1,620.0090$1,458.0081$7,182.00399$12,477.60703
$3,743.00197$912.0060$1,558.0093$1,387.0085$7,600.00435$3,819.00201$2,356.00124$1,159.0061$190.0010$7,524.00396$15,124.00831
$3,582.00199$414.0023$554.4036$378.0025$4,928.40283  $1,458.0081$2,394.00133$540.0030$4,392.00244$9,320.40527
$7,905.0030$33,780.70148  $10,276.5045$51,962.20223$6,587.5025$18,445.0070$26,350.00100$17,127.5065$68,510.00260$120,472.20483
$450.00100$157.5035$513.00118$636.30168$1,756.80421$630.00140$270.0060$657.00146$900.00200$2,457.00546$4,213.80967
$2,990.0065$4,186.0091$3,680.0084$662.4018$11,518.40258$2,760.0060$3,542.0077  $2,254.0049$8,556.00186$20,074.40444
$630.0035$1,569.6094$2,311.20132$3,196.80186$7,707.60447$2,628.00146$1,674.0093$180.0010$2,502.00139$6,984.00388$14,691.60835
$462.0033$448.0032    $910.0065$280.0020  $420.0030$896.0064$1,596.00114$2,506.00179
$1,350.0090$801.0055$2,040.00141$1,689.00127$5,880.00413$1,035.0069$1,440.0096$1,245.0083  $3,720.00248$9,600.00661
$1,650.75213$658.7585$1,475.60196$982.70136$4,767.80630$232.5030$186.0024$1,038.50134$1,681.75217$3,138.75405$7,906.551035
$183,157.346455$183,249.526908$150,623.706446$141,358.195680$658,388.7525489$134,630.564680$120,753.384387$104,561.953115$109,825.454065$469,771.3416247$1,128,160.0941736
123456789
Page size:

legend

TotalPrice column and row totals:
  • > 10,000
  • 5,000 - 10,000
  • < 5,000
Quantity column and row totals
  • > 200
  • 100 - 200
  • < 100
TotalPrice column and row grand totals:
  • > 100,000
  • < 100,000
Legend for TotalPrice column and row totals:
  • > 5,000
  • < 5,000

This demo shows how one can apply a custom style to RadPivotGrid data and aggregate cells conditionally. You can see various ways of accessing groups of cells or specific ones, including:

  • Using only the cell type
  • Using indexes (which in RadPivotGrid are multi-dimensional arrays)
  • Using the cell type and DataField of the cell

As shown in the demo, the two main events that can be used for accessing cells are:

  • CellDataBound which is fired for each cell that is bound in the control.
  • PreRender where all cells are already created and populated and you can access them using the RadPivotGrid server-side API
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.PivotGridExamplesVBNET.Appearance.ConditionalFormatting.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadPivotGrid RenderMode="Lightweight" ID="RadPivotGrid1" runat="server" OnNeedDataSource="RadPivotGrid1_NeedDataSource"
            OnDataBound="RadPivotGrid1_DataBound" Height="500px" OnCellDataBound="RadPivotGrid1_CellDataBound"
            AllowFiltering="false" ShowFilterHeaderZone="false" OnPreRender="RadPivotGrid1_PreRender"
            AllowSorting="true" AllowPaging="true">
            <Fields>
                <telerik:PivotGridRowField DataField="Category">
                </telerik:PivotGridRowField>
                <telerik:PivotGridRowField DataField="ProductName">
                </telerik:PivotGridRowField>
                <telerik:PivotGridColumnField DataField="Year">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridColumnField DataField="Quarter" DataFormatString="Quarter {0}">
                </telerik:PivotGridColumnField>
                <telerik:PivotGridAggregateField DataField="TotalPrice" Aggregate="Sum" DataFormatString="{0:C}">
                </telerik:PivotGridAggregateField>
                <telerik:PivotGridAggregateField DataField="Quantity" Aggregate="Sum">
                </telerik:PivotGridAggregateField>
            </Fields>
            <ClientSettings>
                <Scrolling AllowVerticalScroll="true" ScrollHeight="360px"></Scrolling>
            </ClientSettings>
        </telerik:RadPivotGrid>
    </telerik:RadAjaxPanel>
    <div class="demo-container" style="background-color: white">
        <div class="legendWrapper">
            <h3>legend</h3>
            <div>
                <div class="legend">
                    <span>TotalPrice column and row totals:</span>
                    <ul>
                        <li>
                            <span class="colorBox" style="background-color: rgb(247, 148, 117)"></span>&gt; 10,000
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(248, 169, 145)"></span>5,000 - 10,000
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(250, 202, 186)"></span>&lt; 5,000
                        </li>
                    </ul>
                </div>
                <div class="legend">
                    <span>Quantity column and row totals</span>
                    <ul>
                        <li>
                            <span class="colorBox" style="background-color: rgb(250, 193, 118)"></span>&gt; 200
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(251, 209, 153)"></span>100 - 200
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(252, 224, 187)"></span>&lt; 100
                        </li>
                    </ul>
                </div>
                <div class="legend">
                    <span>TotalPrice column and row grand totals:</span>
                    <ul>
                        <li>
                            <span class="colorBox" style="background-color: rgb(110, 180, 208)"></span>&gt; 100,000
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(167, 210, 227)"></span>&lt; 100,000
                        </li>
                    </ul>
                </div>
                <div class="legend">
                    <span>Legend for TotalPrice column and row totals:</span>
                    <ul>
                        <li>
                            <span class="colorBox" style="background-color: rgb(130, 199, 241)"></span>&gt; 5,000
                        </li>
                        <li>
                            <span class="colorBox" style="background-color: rgb(172, 218, 246)"></span>&lt; 5,000
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance