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

Maps Integration

empty
Drop Filter Fields Here
QuantityCountry
Category
ArgentinaAustriaBelgiumBrazilCanadaDenmarkFinlandFranceGermanyIrelandItalyMexicoNorwayPolandPortugalSpainSwedenSwitzerlandUKUSAVenezuelaGrand Total
7.0017.0010.0031.0010.005.008.0029.0045.005.006.0013.004.006.005.006.0021.005.0020.0052.0021.00326.00
3.0012.006.0019.009.007.005.0013.0027.004.005.004.001.002.006.002.007.003.007.0029.006.00177.00
8.0012.009.0026.0012.006.006.0024.0047.002.008.005.002.002.003.008.0011.006.0015.0049.0014.00275.00
6.0021.007.0027.0013.002.008.0016.0051.007.008.0013.00 1.002.002.008.008.0025.0045.0015.00285.00
1.0013.007.0014.009.001.005.0016.0018.002.005.003.00  4.007.004.006.0014.0029.009.00167.00
 9.003.0012.002.003.006.009.0018.005.002.005.001.001.001.007.009.002.008.0029.004.00136.00
4.006.003.005.003.003.004.0013.0015.002.005.004.001.002.00 1.007.002.009.0014.007.00110.00
5.008.005.0033.006.009.005.0029.0037.009.008.005.003.00 1.005.0014.0010.0015.0046.0021.00274.00
34.0098.0050.00167.0064.0036.0047.00149.00258.0036.0047.0052.0012.0014.0022.0038.0081.0042.00113.00293.0097.001750.00
Beverages
Condiments
Confections
Dairy Products
Grains/Cereals
Meat/Poultry
Produce
Seafood
Grand Total

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Scripts.js
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.PivotGrid.Examples.DragDropFields.DefaultCS" %>

<%@ 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" EnableToolTips="true"
        OnCellDataBound="RadPivotGrid1_CellDataBound">
        <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