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

ToolTips

TotalPriceQuantity

YearQuarter

Category

ProductName

empty
1998				1998 Sum of TotalPrice	1998 Sum of Quantity	Total Sum of TotalPrice	Total Sum of Quantity
Quarter 1		Quarter 2
Sum of TotalPrice	Sum of Quantity	Sum of TotalPrice	Sum of Quantity

empty
Beverages	Chartreuse verte
	Côte de Blaye
	Guaraná Fantástica
	Ipoh Coffee
	Lakkalikööri
	Laughing Lumberjack Lager
	Outback Lager
	Rhönbräu Klosterbier
	Sasquatch Ale
	Steeleye Stout
Grand Total

empty
$3,996.00	222	$360.00	20	$4,356.00	242	$4,356.00	242
$61,922.50	235	$6,587.50	25	$68,510.00	260	$68,510.00	260
$1,737.00	386	$720.00	160	$2,457.00	546	$2,457.00	546
$4,140.00	90	$4,416.00	96	$8,556.00	186	$8,556.00	186
$4,320.00	240	$2,664.00	148	$6,984.00	388	$6,984.00	388
$1,316.00	94	$280.00	20	$1,596.00	114	$1,596.00	114
$2,685.00	179	$1,035.00	69	$3,720.00	248	$3,720.00	248
$2,875.25	371	$232.50	30	$3,107.75	401	$3,107.75	401
$420.00	30	$3,010.00	215	$3,430.00	245	$3,430.00	245
$2,628.00	146	$2,106.00	117	$4,734.00	263	$4,734.00	263
$266,773.92	8290	$132,342.47	4469	$399,116.39	12759	$399,116.39	12759

1 2 3 4 5 6 7

Page size:

Demo Configurator

Layout Type
ToolTip Delay
Cell Type

Layout:

Delay(ms):Spin Up Spin Down

CHOOSE CELL TYPE FOR TOOLTIPS

All
RowHeaderCell
ColumnHeaderCell
DataCell

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

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.

<%@ 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>
<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" />
   <div class="demo-container no-bg">
 <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>
       </div>
    <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>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

ToolTips

Related Resources

Support & Learning Resources

Find Assistance