Telerik blogs

Nowadays, with the increasing adoption of Silverlight, it is not uncommon to integrate one or more Silverlight controls in an existing asp.net website. More or less, it utilizes the integration logic demonstrated in this Telerik TV entry - http://tv.telerik.com/watch/silverlight/webinar/radcontrols-silverlight-aspnet and Manol’s blogpost - http://blogs.telerik.com/manoldonev/posts/09-03-17/silverlight_radchart_interoperability_with_asp_net.aspx . If you want to know how RadMap for Silverlight can be bound to RadGrid in ASP.NET go ahead and keep reading.
The most important steps are as follows:
1. Prepare the Silverlight application, adding references to the dlls of the controls it contains. In our case, this is a simple XAML page, containing a RadMap control:

Code Snippet
  1. <UserControl x:Class="RadChartInASP.NET.Page"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:telerikMap="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
  5.     Width="700" Height="400">
  6.     <Grid>
  7.         <telerikMap:RadMap x:Name="radMap">
  8.         </telerikMap:RadMap>
  9.     </Grid>
  10. </UserControl>

2. The next important segment is the aspx page, which will host the SL object. Again, this is pretty straightforward. In our case, it contains a RadGrid component, along with the mandatory ScriptManager. There are two interesting details:

     -  The Silverlight object, which is directly embedded in the aspx page contains the map control.

     -  The pluginLoaded event handler - here you can obtain a reference to the Silverlight plugin that secures the interaction between the ASP.NET Grid control and the Silverlight RadMap.
The code below demonstrates this:

Code Snippet
  1. <body style="height: 100%; margin: 0;">
  2.     <form id="form1" runat="server" style="height: 100%;" dir="ltr">
  3.     <script type="text/javascript">
  4.         var silverlightControl;
  5.         function pluginLoaded(sender) {
  6.             // get reference to the silverlight control on the page
  7.             silverlightControl = sender.get_element();
  8.         }
  9.  
  10.         function HideCommandBar_Click(sender) {
  11.             silverlightControl.content.slChartPage.CommandBarVisibility(sender.checked);
  12.         }
  13.  
  14.         function HideZoomBar_Click(sender) {
  15.             silverlightControl.content.slChartPage.ZoomBarVisibility(sender.checked);
  16.         }
  17.  
  18.         function HideNavigation_Click(sender) {
  19.             silverlightControl.content.slChartPage.NavigationVisibility(sender.checked);
  20.         }
  21.  
  22.         function HideMouseLocationIndicator_Click(sender) {
  23.             silverlightControl.content.slChartPage.MouseLocationIndicatorVisibility(sender.checked);
  24.         }
  25.  
  26.         function HideScale_Click(sender) {
  27.             silverlightControl.content.slChartPage.ScaleVisibility(sender.checked);
  28.         }
  29.  
  30.         function RowSelected(sender, eventArgs) {
  31.             var MasterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
  32.             var row = MasterTable.get_selectedItems()[0];
  33.             var latitude = MasterTable.getCellByColumnUniqueName(row, "Latitude").innerHTML;
  34.             var longitude = MasterTable.getCellByColumnUniqueName(row, "Longitude").innerHTML;
  35.             silverlightControl.content.slChartPage.MyMapCenter(latitude, longitude);
  36.         }
  37.  
  38.     </script>
  39.     <asp:ScriptManager ID="ScriptManager1" runat="server">
  40.     </asp:ScriptManager>
  41.     <div style="height: 400px;">
  42.         <table>
  43.             <tr>
  44.                 <td rowspan="3">
  45.                     <telerik:radgrid oncolumncreated="RadGrid1_ColumnCreated" id="RadGrid1" runat="server"
  46.                         gridlines="None" height="150px" width="300px">
  47.             <ClientSettings>
  48.                 <Selecting AllowRowSelect="True" />
  49.                 <ClientEvents OnRowSelected="RowSelected" />
  50.             </ClientSettings>
  51.             <MasterTableView>
  52.                 <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
  53.                 <RowIndicatorColumn>
  54.                     <HeaderStyle Width="20px"></HeaderStyle>
  55.                 </RowIndicatorColumn>
  56.                 <ExpandCollapseColumn>
  57.                     <HeaderStyle Width="20px"></HeaderStyle>
  58.                 </ExpandCollapseColumn>
  59.             </MasterTableView>
  60.         </telerik:radgrid>
  61.                 </td>
  62.                 <td>
  63.                     <asp:CheckBox ID="HideCommandBar" runat="server" onclick="HideCommandBar_Click(this);" />
  64.                     <label>
  65.                         Hide Command Bar</label>
  66.                 </td>
  67.                 <td>
  68.                     &nbsp;&nbsp;
  69.                 </td>
  70.                 <td>
  71.                     <asp:CheckBox ID="HideZoomBar" runat="server" onclick="HideZoomBar_Click(this);" />
  72.                     <label>
  73.                         Hide Zoom Bar</label>
  74.                 </td>
  75.             </tr>
  76.             <tr>
  77.                 <td>
  78.                     <asp:CheckBox ID="HideNavigation" runat="server" onclick="HideNavigation_Click(this);" />
  79.                     <label>
  80.                         Hide Navigation</label>
  81.                 </td>
  82.                 <td>
  83.                     &nbsp;&nbsp;
  84.                 </td>
  85.                 <td>
  86.                     <asp:CheckBox ID="MouseLocationIndicator" runat="server" onclick="HideMouseLocationIndicator_Click(this);" />
  87.                     <label>
  88.                         Hide Mouse Location Indicator</label>
  89.                 </td>
  90.             </tr>
  91.             <tr>
  92.                 <td>
  93.                     <asp:CheckBox ID="Scale" runat="server" onclick="HideScale_Click(this);" />
  94.                     <label>
  95.                         Hide Scale</label>
  96.                 </td>
  97.             </tr>
  98.             <tr>
  99.                 <td colspan="4" width="680px">
  100.                     <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/RadChartInASP.NET.xap"
  101.                         MinimumVersion="2.0.30728.0" Width="100%" Height="100%" OnPluginLoaded="pluginLoaded" />
  102.                 </td>
  103.             </tr>
  104.         </table>
  105.     </div>
  106.     </form>
  107. </body>

As evident from the code above, once we have a reference to the SL plugin in the pluginLoaded event handler, we can communicate with the Map control:

Code Snippet
  1. silverlightControl.content.slChartPage.MyMapCenter(latitude, longitude);

The last piece of the puzzle is how the JavaScript method call is handled, as well as how it is correlated with the xaml page. This is done in the xaml codebehind via the following methods:

Code Snippet
  1. [ScriptableMember]
  2.         public void MyMapCenter(string latitude, string longitude)
  3.         {
  4.             this.radMap.Center = new Location(double.Parse(latitude), double.Parse(longitude));
  5.             this.radMap.ZoomLevel = 7;
  6.         }
  7.  
  8.         [ScriptableMember]
  9.         public void CommandBarVisibility(bool isChecked)
  10.         {
  11.             if (isChecked)
  12.             {
  13.                 this.radMap.CommandBarVisibility = System.Windows.Visibility.Collapsed;
  14.             }
  15.             else this.radMap.CommandBarVisibility = System.Windows.Visibility.Visible;
  16.         }
  17.  
  18.         [ScriptableMember]
  19.         public void ZoomBarVisibility(bool isChecked)
  20.         {
  21.             if (isChecked)
  22.             {
  23.                 this.radMap.ZoomBarVisibility = System.Windows.Visibility.Collapsed;
  24.             }
  25.             else this.radMap.ZoomBarVisibility = System.Windows.Visibility.Visible;
  26.         }
  27.  
  28.         [ScriptableMember]
  29.         public void ScaleVisibility(bool isChecked)
  30.         {
  31.             if (isChecked)
  32.             {
  33.                 this.radMap.ScaleVisibility = System.Windows.Visibility.Collapsed;
  34.             }
  35.             else this.radMap.ScaleVisibility = System.Windows.Visibility.Visible;
  36.         }
  37.  
  38.         [ScriptableMember]
  39.         public void MouseLocationIndicatorVisibility(bool isChecked)
  40.         {
  41.             if (isChecked)
  42.             {
  43.                 this.radMap.MouseLocationIndicatorVisibility = System.Windows.Visibility.Collapsed;
  44.             }
  45.             else this.radMap.MouseLocationIndicatorVisibility = System.Windows.Visibility.Visible;
  46.         }
  47.  
  48.         [ScriptableMember]
  49.         public void NavigationVisibility(bool isChecked)
  50.         {
  51.             if (isChecked)
  52.             {
  53.                 this.radMap.NavigationVisibility = System.Windows.Visibility.Collapsed;
  54.             }
  55.             else this.radMap.NavigationVisibility = System.Windows.Visibility.Visible;
  56.         }


The [ScriptableMember] attribute indicates that a specific method is accessible to JavaScript callers. The Page_Loaded event handler registers the script key, and the MyMapCenter method handles the centering of the Map control, based on the latitude and longitude coordinates.

Voila – the result:
RadMapDemoPic

You can download the full source code from

here

We hope you find this article useful - if you have any feedback, drop us a line here!

Happy coding!


Evgenia-Milcheva
About the Author

Evgenia Milcheva

Front-End Developer
Telerik XAML Team

Comments

Comments are disabled in preview mode.