PivotGrid - ToolTips

TotalPriceQuantityYearQuarter
CategoryProductName
19981998 Sum of TotalPrice1998 Sum of QuantityTotal Sum of TotalPriceTotal Sum of Quantity
Quarter 1Quarter 2
Sum of TotalPriceSum of QuantitySum of TotalPriceSum of Quantity
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
$4,590.00255$2,592.00144$7,182.00399$7,182.00399
$2,527.00133$4,997.00263$7,524.00396$7,524.00396
$3,996.00222$396.0022$4,392.00244$4,392.00244
$61,922.50235$6,587.5025$68,510.00260$68,510.00260
$1,737.00386$720.00160$2,457.00546$2,457.00546
$4,140.0090$4,416.0096$8,556.00186$8,556.00186
$4,320.00240$2,664.00148$6,984.00388$6,984.00388
$1,316.0094$280.0020$1,596.00114$1,596.00114
$2,685.00179$1,035.0069$3,720.00248$3,720.00248
$2,875.25371$263.5034$3,138.75405$3,138.75405
$315,242.1210646$154,529.225601$469,771.3416247$469,771.3416247
Page size:

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows how you can use the new feature of RadPivotGrid to show ToolTips containing various data for its cells.
It also shows how you can set different styles for RowHeader, ColumnHeader and Data cells. The feature is enabled by setting EnableToolTips property of the control to true.
You also have options for various customizations using the client-side event OnToolTipShow The delay for the ToolTip can be configured by using the ShowDelay property on the server or the client-side equivalent set_showDelay.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.ToolTips.DefaultCS" %>

<%@ Register TagPrefix="telerik" 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" 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 runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadPivotGrid RenderMode="Lightweight" AllowPaging="true" OnNeedDataSource="RadPivotGrid1_NeedDataSource"
        ID="RadPivotGrid1" runat="server" ColumnHeaderZoneText="ColumnHeaderZone" EnableToolTips="true"
        AllowFiltering="false" ShowFilterHeaderZone="false">
        <ClientSettings>
            <ClientEvents OnToolTipShow="demo.toolTipShow" OnPivotGridCreated="demo.pivotCreated" />
            <Scrolling AllowVerticalScroll="true" />
        </ClientSettings>
        <Fields>
            <telerik:PivotGridRowField DataField="Category" ZoneIndex="0">
            </telerik:PivotGridRowField>
            <telerik:PivotGridRowField DataField="ProductName" ZoneIndex="1">
            </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>
        <SortExpressions>
            <telerik:PivotGridSortExpression FieldName="TotalPrice" SortOrder="Descending" />
        </SortExpressions>
    </telerik:RadPivotGrid>
    <telerik:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View Title="Layout Type">
                <qsf:ComboBox AutoPostBack="true" Label="Layout:" Size="Medium" runat="server" ID="RadComboBoxTableLayout"
                    OnSelectedIndexChanged="RadComboBox_SelectedIndexChanged">
                    <Items>
                        <telerik:RadComboBoxItem Text="Tabular" Value="Tabular" />
                        <telerik:RadComboBoxItem Text="Outline" Value="Outline" />
                        <telerik:RadComboBoxItem Text="Compact" Value="Compact" />
                    </Items>
                </qsf:ComboBox>
            </qsf:View>
            <qsf:View Title="ToolTip Delay">
                <ul class="fb-group">
                    <li> <qsf:NumericTextBox NumberFormat-DecimalDigits="0" Size="Narrow"
                    Label="Delay(ms):" runat="server" ID="DelayNumericBox" MinValue="50" MaxValue="2000">
                </qsf:NumericTextBox>
                <qsf:Button Text="Confirm" Size="Narrow" OnClick="btnSetDelay_Click" ID="btnSetDelay"
                    runat="server" /></li>
                </ul>
            </qsf:View>
            <qsf:View Title="Cell Type">
                <asp:Panel runat="server" ID="CellTypePanel">
                    <label class="checkBoxesLabel">CHOOSE CELL TYPE FOR TOOLTIPS</label>
                    <ul class="checkbox-list">
                        <li><span class="checkbox">
                            <asp:CheckBox Checked="true" OnCheckedChanged="chbAll_CheckedChanged" AutoPostBack="true"
                               Text="All" runat="server" ID="chbAll" /></span></li>
                        <li><span class="checkbox">
                            <asp:CheckBox Enabled="false" Text="RowHeaderCell" runat="server" ID="chbRowHeaderCell" /></span></li>
                        <li><span class="checkbox">
                            <asp:CheckBox Enabled="false" Text="ColumnHeaderCell" runat="server"
                                ID="chbColumnHeaderCell" /></span></li>
                        <li><span class="checkbox">
                            <asp:CheckBox Enabled="false" Text="DataCell" runat="server" ID="chbDataCell" /></span></li>
                    </ul>
                </asp:Panel>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?