Hello everyone,
I just started using ASP.NET AJAX Q1 2009 and Silverlight Q1 2009 controls about a month ago, so if anyone can help me with this problem I would really appreciate it.
I embedded a Silverlight RadGauge control inside an ASP.NET page by following the steps in this video: http://tv.telerik.com/telerikwatchminute/episode/telerik-watch-minute-radgauge-for-sl-in-asp.net. Basically adding a Silverlight application to same solution as the ASP.NET web project, wrap the SL control in an ASP.NET user control and put the user control in the main page.
Everything is great, the control shows up on the page and I can pass values to it, until I put it in an RadAjaxPanel.
The gauge shows up on first load, but on postback it disappears entirely. Tracing the code shows that the SL control is not loaded at all (no Application_Startup or Loaded events fired). Switching to RadAjaxManager also doesn't work.
I tried replacing the RadAjaxPanel with the regular ASP.NET UpdatePanel, and it works this time. I thought RadAjaxPanel is a wrapper for the regular UpdatePanel and they should work the same. Am I missing something?
I need this to work for a report page I have, where it has some controls that updates a RadGrid and the Gauge, and everything is in a RadAjaxPanel. Since all the other pages uses the RadAjaxLoadingPanel and we would like the pages to behave consistently (e.g. using AjaxLoadingPanel, etc), it would be great if I don't have to switch to UpdatePanel for this page.
If RadAjaxPanel is not supposed to work with embedded SL controls, is there a way to pass values between a RadAjaxPanel and an UpdatePanel?
Below is my code:
the UserControl:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucSLGauge.ascx.cs" Inherits="TestSilverlight.UserControls.ucSLGauge" %> |
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> |
<asp:Silverlight ID="SLGauge" runat="server" Source="~/ClientBin/SilverLightControls.xap" |
OnPluginLoaded="pluginLoaded" MinimumVersion="2.0.31005.0" Width="280" Height="280"> |
</asp:Silverlight> |
<script type="text/javascript"> |
var slCtrl = null; |
var gaVal = null; |
var width = null; |
var height = null; |
function pluginLoaded(sender) { |
// Get reference to the sliverlight control on page. |
slCtrl = sender.get_element(); |
if (slCtrl != null) { |
// Call scriptable method in Silverlight application (we call it here to ensure SL control is already loaded) |
if (gaVal != null) { |
slCtrl.content.slGaugeObject.SetNeedleValue(gaVal); |
} |
if ((width != null && width > 0) || (height != null && height > 0)) { |
slCtrl.content.slGaugeObject.SetWidthHeight(width, height); |
} |
} |
} |
function setGaugeValue(val) { |
if (val != null) { |
gaVal = val; |
} |
} |
function setGaugeValueAndSize(val, w, h) { |
if (val != null) { |
gaVal = val; |
} |
if (w != null && w > 0) { |
wwidth = w; |
} |
if (h != null && h > 0) { |
hheight = h; |
} |
} |
function setWidthHeight(w, h) { |
if (w != null) { |
wwidth = w; |
} |
if (h != null) { |
hheight = h; |
} |
} |
</script> |
The ASPX page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSilverlight._Default" ValidateRequest="false" %> |
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> |
<%@ Register TagName="gauge" TagPrefix="ucSL" Src="~/UserControls/ucSLGauge.ascx" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml" > |
<head runat="server"><title></title></head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> |
<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" runat="server" Skin="Vista"/> |
<telerik:RadAjaxPanel ID="radAjaxPanel1" runat="server" LoadingPanelID="radAjaxLoadingPanel1" > |
This control is inside RadAjaxPanel (will disappear on post back): <br /> |
<ucSL:gauge runat="server" ID="myGauge" Width="280" Height="280" NeedleValue="20" /> |
<asp:Button ID="btnRadPanelPostBack" runat="server" Text="Postback within RadAjaxPanel" /> |
</telerik:RadAjaxPanel> |
<br /><br /> |
<asp:UpdatePanel ID="pnlTest" runat="server" UpdateMode="Conditional"> |
<ContentTemplate> |
This control is inside ASP:UpdatePanel (will retain on postback): <br /> |
<ucSL:gauge runat="server" ID="Gauge1" Width="280" Height="280" NeedleValue="80" /> |
<asp:Button ID="btnUpdPanelPostBack" runat="server" Text="Postback within UpdatePanel" /> |
</ContentTemplate> |
</asp:UpdatePanel> |
</form> |
</body> |
</html> |
The Silverlight Xaml (pretty much the same as the demo):
<UserControl x:Class="SilverLightControls.Page" |
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" |
xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge" |
xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge" |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > |
<Grid x:Name="LayoutRoot"> |
<Grid.Resources> |
<ResourceDictionary> |
<telerik:ResourceDictionary.MergedDictionaries> |
<telerik:ResourceDictionary |
Keys="RadialGaugeHalfCircleNStyle,RadialGaugeHalfCircleSStyle,RadialGaugeHalfCircleEStyle, |
RadialGaugeHalfCircleWStyle,RadialGaugeQuarterCircleNEStyle,RadialScaleHalfCircleNStyle, |
RadialScaleHalfCircleSStyle,RadialScaleHalfCircleEStyle,RadialScaleHalfCircleWStyle, |
RadialGaugeQuarterCircleNEStyle,RadialGaugeQuarterCircleNWStyle, |
RadialGaugeQuarterCircleSWStyle,RadialGaugeQuarterCircleSEStyle, |
RadialScaleQuarterCircleNEStyle,RadialScaleQuarterCircleNWStyle, |
RadialScaleQuarterCircleSWStyle,RadialScaleQuarterCircleSEStyle" |
Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" /> |
</telerik:ResourceDictionary.MergedDictionaries> |
</ResourceDictionary> |
</Grid.Resources> |
<control:RadGauge Width="280" Height="280" x:Name="radGauge1" > |
<gauge:RadialGauge x:Name="radialGauge1"> |
<gauge:RadialScale x:Name="radialScale" |
Min="0" |
Max="100" |
MajorTicks="10" |
MiddleTicks="2" |
MinorTicks="10"> |
<gauge:RadialScale.MajorTick> |
<gauge:TickProperties Length=".12"/> |
</gauge:RadialScale.MajorTick> |
<gauge:RadialScale.MiddleTick> |
<gauge:TickProperties Length="0.09" /> |
</gauge:RadialScale.MiddleTick> |
<gauge:RadialScale.MinorTick> |
<gauge:TickProperties Length="0.05" /> |
</gauge:RadialScale.MinorTick> |
<gauge:RadialScale.Label> |
<gauge:LabelProperties Location="Inside" /> |
</gauge:RadialScale.Label> |
<gauge:RadialScale.Indicators> |
<gauge:Needle x:Name="needle1" IsAnimated="true" Value="70" ></gauge:Needle> |
<gauge:RadialBar x:Name="radialBar1" IsAnimated="True" /> |
</gauge:RadialScale.Indicators> |
</gauge:RadialScale> |
</gauge:RadialGauge> |
</control:RadGauge> |
</Grid> |
</UserControl> |