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

Maps Integration

Drop Filter Fields Here

Quantity

Argentina	Austria	Belgium	Brazil	Canada	Denmark	Finland	France	Germany	Ireland	Italy	Mexico	Norway	Poland	Portugal	Spain	Sweden	Switzerland	UK	USA	Venezuela	Grand Total
7.00	16.00	8.00	24.00	8.00	5.00	5.00	24.00	36.00	4.00	5.00	11.00	4.00	3.00	4.00	4.00	18.00	3.00	14.00	37.00	16.00	256.00
2.00	10.00	4.00	11.00	5.00	6.00	3.00	9.00	19.00	4.00	2.00	4.00	1.00	2.00	4.00	2.00	4.00	3.00	3.00	20.00	4.00	122.00
8.00	12.00	9.00	26.00	12.00	6.00	6.00	24.00	47.00	2.00	8.00	5.00	2.00	2.00	3.00	8.00	11.00	6.00	15.00	47.00	14.00	273.00
6.00	21.00	7.00	27.00	13.00	2.00	8.00	16.00	51.00	7.00	8.00	13.00		1.00	2.00	2.00	8.00	8.00	25.00	42.00	15.00	282.00
1.00	13.00	7.00	14.00	9.00	1.00	5.00	16.00	18.00	2.00	5.00	3.00			4.00	7.00	4.00	6.00	14.00	26.00	9.00	164.00
	9.00	3.00	11.00	2.00	3.00	6.00	9.00	17.00	4.00	2.00	5.00	1.00	1.00	1.00	7.00	9.00	2.00	7.00	27.00	4.00	130.00
3.00	5.00	3.00	4.00	2.00	2.00	4.00	7.00	11.00	2.00	3.00	4.00		2.00		1.00	6.00	2.00	5.00	10.00	6.00	82.00
5.00	7.00	4.00	31.00	4.00	7.00	5.00	23.00	36.00	8.00	8.00	4.00	3.00			3.00	12.00	9.00	14.00	38.00	20.00	241.00
32.00	93.00	45.00	148.00	55.00	32.00	42.00	128.00	235.00	33.00	41.00	49.00	11.00	11.00	18.00	34.00	72.00	39.00	97.00	247.00	88.00	1550.00

Beverages

Condiments

Confections

Dairy Products

Grains/Cereals

Meat/Poultry

Produce

Seafood

Grand Total

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

You could take a look at the map and how the pivot data grand total cell values are extracted in the Google Maps Markers Tooltips.

The purpose of this demo is to show how RadPivotGrid control could easily be integrated with any external framework, library or control. The showcase above integrates the famous Google Maps together with Telerik's PivotGrid control.

<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.PivotGrid.Examples.DragDropFields.DefaultVB" %>

<%@ 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 rel="Stylesheet" type="text/css" href="Styles.css" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9AGdrkxDdrPBf3IGTmXVsWQ6iE-ARAJg&amp;sensor=false"></script>
    <script type="text/javascript" src="scripts.js"></script>
</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:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                    <telerik:AjaxUpdatedControl ControlID="HiddenFieldCountries" />
                    <telerik:AjaxUpdatedControl ControlID="HiddenFieldData" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadPivotGrid RenderMode="Lightweight" runat="server" ID="RadPivotGrid1" OnNeedDataSource="RadPivotGrid1_NeedDataSource"
        AllowSorting="true" AllowPaging="true"
        OnCellDataBound="RadPivotGrid1_CellDataBound" EnableToolTips="true">
        <Fields>
            <telerik:PivotGridColumnField DataField="Country"></telerik:PivotGridColumnField>
            <telerik:PivotGridAggregateField DataField="Quantity" Caption="Quantity" UniqueName="Quantity"
                Aggregate="Count" DataFormatString="{0:F2}">
            </telerik:PivotGridAggregateField>
            <telerik:PivotGridRowField DataField="Category" Caption="Category" UniqueName="Category"
                DataFormatString="{0:F2}">
            </telerik:PivotGridRowField>
        </Fields>
    </telerik:RadPivotGrid>
    <br />
    <div id="map"></div>
    <asp:HiddenField ID="HiddenFieldCountries" runat="server" />
    <asp:HiddenField ID="HiddenFieldData" runat="server" />
    </div>
    </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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Maps Integration

Related Resources

Support & Learning Resources

Find Assistance