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

ToolTips

empty
TotalPriceQuantityYearQuarter
CategoryProductName
empty
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
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
$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
123456789
Page size:
  • Demo Configurator
  • Layout Type
  • ToolTip Delay
  • Cell Type

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>
<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