PivotGrid - Maps Integration

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

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

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 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 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" />
    <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" />
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?