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

Templates

empty
Number of visitorsDishes soldMonthsTime of day
Restaurant nameDishes
empty
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
empty
Genoa Restaurant Chai
Chai
Ikura
Ikura
Queso Cabrales
Queso Cabrales
Queso Manchego La Pastora
Queso Manchego La Pastora
Konbu
Konbu
Grand Total
empty
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
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.

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.PivotGrid.Examples.Templates.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
</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"
            AllowPaging="true" PageSize="5" OnCellDataBound="RadPivotGrid1_CellDataBound"
            ColumnGroupsDefaultExpanded="false" ShowFilterHeaderZone="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 ID="Label2" 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="Label3" 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="Label4" 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>

Support & Learning Resources

Find Assistance