PivotGrid - Templates

Number of visitorsDishes soldMonthsTime of day
Restaurant nameDishes
April Number of visitors Dishes sold August December February January July June March May November October September Total number of visitors Total dishes sold
AfternoonEveningMorningNoon
Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold Number of visitors Dishes sold
Genoa Restaurant Chai
Chai
Ikura
Ikura
Queso Cabrales
Queso Cabrales
Queso Manchego La Pastora
Queso Manchego La Pastora
Konbu
Konbu
Tofu
Tofu
Genen Shouyu
Genen Shouyu
Pavlova
Pavlova
Alice Mutton
Alice Mutton
Carnarvon Tigers
Carnarvon Tigers
Grand Total
22 22 17 27 23 26 15 21 779615433562366049786286749867944158478433596186597904
16 26 26 38 star 25 37 star 8 19 7512079124406127425887751056910977112779451838610544687581110
24 37 star 10 20 17 24 0 0 5181313777966810746557390466975908110771108398158937161014
25 37 star 8 11 14 19 27 30 star 7497681073463467134753970719682114811075087235269986711037
14 15 15 16 4 8 14 21 4760547239675785479367884870679770906084721115173679990
5 12 21 35 star 11 23 26 40 star 631106071601034981568720493659355169103921338711434646611025
29 39 star 12 25 24 29 25 39 star 9013279109698550736183731055093457781108234359103891127691123
4 10 26 34 star 2 15 21 24 538346732970659067997296621008092396665948912432586991045
8 16 4 4 28 38 star 21 26 618479975375153366974054628975112881183776781025161705998
28 31 star 28 29 11 16 1 3 687954766596558866993056668973102335856954176781126851026
33274766339950223261479434674995134541957713476197951327819471132971937913467195861347419674134591976013170193861341819914131901963713460197831369219983160835235945
Page size:



- Displays that the product has been sold less than 40 times for the given month and is less preferred by the customers.
- Displays that the product has been sold more than 110 times for the given month and is more preferred by the customers.
star - Displays the top selling products which have been sold more than 30 times for the current period of the day.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates the RadPivotGrid templates which can be instantiated in the row, column, and data tables. For the purpose of this demo, if more than 30 units from a particular product are sold, it is awarded with a star. The meaning of the colorful cells is similar, but they are showing this statistic per months.
It is important to note that due to the nature of this ASP.NET Pivot Grid control, the usual Eval approach for extracting the cell value won't work. Instead, one could use the Container.DataItem property to get hold of the underlying cell value.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.PivotGrid.Examples.Templates.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</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" DataSourceID="SqlDataSource1"
            ShowFilterHeaderZone="false" AllowPaging="true" PageSize="10" OnCellDataBound="RadPivotGrid1_CellDataBound"
            ColumnGroupsDefaultExpanded="false">
            <Fields>
                <telerik:PivotGridColumnField DataField="Months" UniqueName="Months" Caption="Months">
                    <TotalHeaderCellTemplate>
                        <asp:Label Text='<%# "Number of visitors for " + GetDataItem().ToString().Split(new string[] { " " }, StringSplitOptions.None)[0]  %>'
                            runat="server" />
                    </TotalHeaderCellTemplate>
                </telerik:PivotGridColumnField>
                <telerik:PivotGridColumnField DataField="TimeOfDay" UniqueName="TimeOfDay" Caption="Time of day">
                    <TotalHeaderCellTemplate>
                        <asp:Label ID="Label1" Text='<%# "Dishes sold for " + GetDataItem().ToString().Split(new string[] { " " }, StringSplitOptions.None)[0]  %>'
                            runat="server" />
                    </TotalHeaderCellTemplate>
                </telerik:PivotGridColumnField>
                <telerik:PivotGridRowField DataField="RestaurantName" UniqueName="RestaurantName" Caption="Restaurant name">
                </telerik:PivotGridRowField>
                <telerik:PivotGridRowField DataField="DishesData" UniqueName="DishesData" Caption="Dishes">
                    <CellTemplate>
                        <asp:Label ID="DishesDataLabel" runat="server" Text='<%# GetDataItem().ToString().Split(new string[] { "__" }, StringSplitOptions.None)[1] %>'></asp:Label>
                        <br />
                        <asp:Image ID="Image1" Width="90px" Height="90px" runat="server" ImageUrl='<%# String.Format("../../../Img/Northwind/Products/Thumbs/{0}.jpg", GetDataItem().ToString().Split(new string[] { "__" }, StringSplitOptions.None)[0]) %>'
                            AlternateText='<%# String.Format("{0}", GetDataItem().ToString().Split(new string[] { "__" }, StringSplitOptions.None)[1]) %>' />
                    </CellTemplate>
                </telerik:PivotGridRowField>
                <telerik:PivotGridAggregateField DataField="NumberOfVisitors" Aggregate="Sum" UniqueName="NumberOfVisitors" Caption="Number of visitors">
                    <HeaderCellTemplate>
                        <asp:Label ID="AggregateCell1" Text="Number of visitors" runat="server" />
                    </HeaderCellTemplate>
                    <ColumnGrandTotalHeaderCellTemplate>
                        <asp:Label Text="Total number of visitors" runat="server" />
                    </ColumnGrandTotalHeaderCellTemplate>
                </telerik:PivotGridAggregateField>
                <telerik:PivotGridAggregateField DataField="SoldDishes" Aggregate="Sum" UniqueName="SoldDishesSum" Caption="Dishes sold">
                    <CellTemplate>
                        <asp:Label ID="SoldDishesLabel" runat="server" Text='<%# GetDataItem() %>'></asp:Label>
                        <asp:Image ID="SoldDishesImage" runat="server" Visible="true" Style="float: right"
                            Width="12px" Height="12px" ImageUrl="~/PivotGrid/Examples/Templates/images/star.png" AlternateText="star" />
                    </CellTemplate>
                    <HeaderCellTemplate>
                        <asp:Label Text="Dishes sold" runat="server" />
                    </HeaderCellTemplate>
                    <ColumnGrandTotalHeaderCellTemplate>
                        <asp:Label Text="Total dishes sold" runat="server" />
                    </ColumnGrandTotalHeaderCellTemplate>
                </telerik:PivotGridAggregateField>
            </Fields>
            <ClientSettings>
                <Scrolling AllowVerticalScroll="true" ScrollHeight="600px" />
            </ClientSettings>
        </telerik:RadPivotGrid>
    </telerik:RadAjaxPanel>
    <br />
    <div class="demo-container">
        <label>Legend</label>
        <br />
        <br />
        <span class="Box" id="Red"></span>
        <asp:Label Text="- Displays that the product has been sold less than 40 times for the given month and is less preferred by the customers."
            runat="server" />
        <br />
        <span class="Box" id="Green"></span>
        <asp:Label ID="Label2" Text="- Displays that the product has been sold more than 110 times for the given month and is more preferred by the customers."
            runat="server" />
        <br />
        <asp:Image ID="SoldDishesImage" runat="server" Visible="true" ImageUrl="~/PivotGrid/Examples/Templates/images/star.png" AlternateText="star" />
        <asp:Label ID="Label3" Text="- Displays the top selling products which have been sold more than 30 times for the current period of the day."
            runat="server" />
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [RestaurantName], [Dishes], [TimeOfDay], [Months], [NumberOfVisitors], 
            [SoldDishes], CAST([DishesID] AS VARCHAR) + '__' + [Dishes] as DishesData, [DishesID] FROM [Restaurants]"></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?