We are having a problem with silver-light control that is inside <telerik:RadPageView/>.
The issue is, it loads properly on IE; but doesn’t work on Chrome and FF browser. However, it is working fine when used outside the RadPageView control.
Could you please provide us a solution to resolve this?
Please refer application code to reproduce this issue.
ASPX page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadChartInASP.NET.Web._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!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
style
=
"height: 100%; margin: 0;"
>
<
form
id
=
"form1"
runat
=
"server"
style
=
"height: 100%;"
dir
=
"ltr"
>
<
script
type
=
"text/javascript"
>
var silverlightControl;
function pluginLoaded(sender) {
// get reference to the silverlight control on the page
silverlightControl = sender.get_element();
}
function ColorChanged(sender, args) {
silverlightControl.content.slChartPage.SeriesColor = sender.get_selectedColor();
}
function Show3D_Click(sender) {
var checked = sender.checked;
silverlightControl.content.slChartPage.Show3D = checked;
if (checked) {
$get("ColorPicker").style.display = "none";
$get("ColorPickerLbl").style.display = "none";
$get("ShowTooltips").style.display = "none";
$get("ShowTooltipsLbl").style.display = "none";
$get("HideElements").style.display = "block";
$get("HideElementsLbl").style.display = "block";
$get("HideElementsOnRotation").checked = false;
}
else {
$get("ColorPicker").style.display = "block";
$get("ColorPickerLbl").style.display = "block";
$get("ShowTooltips").style.display = "block";
$get("ShowTooltipsLbl").style.display = "block";
$get("ShowItemTooltips").checked = false;
$get("HideElements").style.display = "none";
$get("HideElementsLbl").style.display = "none";
}
}
function AxisXTitleTextBox_Changed(sender, args) {
silverlightControl.content.slChartPage.AxisXTitle = args.get_newValue();
}
function AxisYTitleTextBox_Changed(sender, args) {
silverlightControl.content.slChartPage.AxisYTitle = args.get_newValue();
}
function ShowItemLabels_Click(sender) {
silverlightControl.content.slChartPage.ShowItemLabels = sender.checked;
}
function ShowItemTooltips_Click(sender) {
silverlightControl.content.slChartPage.ShowItemTooltips = sender.checked;
}
function HideElementsOnRotation_Click(sender) {
silverlightControl.content.slChartPage.HideElementsOnRotation = sender.checked;
}
function ShowXAxis_Click(sender) {
silverlightControl.content.slChartPage.ShowXAxis = sender.checked;
}
function ShowYAxis_Click(sender) {
silverlightControl.content.slChartPage.ShowYAxis = sender.checked;
}
function ShowXAxisGridlines_Click(sender) {
silverlightControl.content.slChartPage.ShowXAxisGridlines = sender.checked;
}
function ShowYAxisGridlines_Click(sender) {
silverlightControl.content.slChartPage.ShowYAxisGridlines = sender.checked;
}
function ShowXAxisStriplines_Click(sender) {
silverlightControl.content.slChartPage.ShowXAxisStriplines = sender.checked;
}
function ShowYAxisStriplines_Click(sender) {
silverlightControl.content.slChartPage.ShowYAxisStriplines = sender.checked;
}
function AxisXFormat_Changed(sender, args) {
silverlightControl.content.slChartPage.AxisXFormat = args.get_item().get_text();
}
function AxisYFormat_Changed(sender, args) {
silverlightControl.content.slChartPage.AxisYFormat = args.get_item().get_text();
}
function ItemsFormat_Changed(sender, args) {
silverlightControl.content.slChartPage.ItemsFormat = args.get_item().get_text();
}
function SeriesColorCombo_Changed(sender, args) {
silverlightControl.content.slChartPage.SeriesColor = args.get_item().get_text();
}
</
script
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
div
style
=
"height: 400px;"
>
<
telerik:RadTabStrip
ID
=
"tabConfigure"
Width
=
"100%"
ClientIDMode
=
"Static"
runat
=
"server"
Style
=
"position: relative; margin-left: 0px;"
MultiPageID
=
"ConfiguraionPan"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Admin"
Value
=
"Admin"
runat
=
"server"
PageViewID
=
"pvAdmin"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Dashboard"
runat
=
"server"
PageViewID
=
"pvCharts"
Value
=
"Charting"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
asp:Silverlight
ID
=
"Xaml1"
runat
=
"server"
Source
=
"~/ClientBin/RadChartInASP.NET.xap"
MinimumVersion
=
"2.0.30728.0"
Width
=
"100%"
Height
=
"100%"
OnPluginLoaded
=
"pluginLoaded"
/>
</
div
>
<
telerik:RadMultiPage
ID
=
"ConfiguraionPan"
Width
=
"100%"
CssClass
=
"multiPage"
runat
=
"server"
ClientIDMode
=
"Static"
>
<
telerik:RadPageView
ID
=
"ConfugarationPan"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
ClientIDMode
=
"Static"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"pvDashboard"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
ClientIDMode
=
"Static"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"pvCharts"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
ClientIDMode
=
"Static"
>
<
table
>
<
tr
>
<
td
>
Show 3D chart:
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"Show3D"
runat
=
"server"
onclick
=
"Show3D_Click(this);"
/>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
id
=
"ColorPickerLbl"
>
Series color:
</
div
>
</
td
>
<
td
>
<
div
id
=
"ColorPicker"
>
<
telerik:RadColorPicker
ID
=
"RadColorPicker1"
runat
=
"server"
ShowEmptyColor
=
"false"
Preset
=
"Standard"
OnClientColorChange
=
"ColorChanged"
>
</
telerik:RadColorPicker
>
</
div
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
AxisXTitle:
</
td
>
<
td
>
<
telerik:RadTextBox
ID
=
"AxisXTitleTextBox"
runat
=
"server"
Width
=
"220px"
>
<
ClientEvents
OnValueChanged
=
"AxisXTitleTextBox_Changed"
/>
</
telerik:RadTextBox
>
</
td
>
<
td
>
<
div
id
=
"ShowTooltips"
>
<
asp:CheckBox
ID
=
"ShowItemTooltips"
runat
=
"server"
onclick
=
"ShowItemTooltips_Click(this);"
/>
</
div
>
<
div
id
=
"HideElements"
style
=
"display: none;"
>
<
asp:CheckBox
ID
=
"HideElementsOnRotation"
runat
=
"server"
onclick
=
"HideElementsOnRotation_Click(this);"
/>
<
br
/>
</
div
>
</
td
>
<
td
>
<
div
id
=
"ShowTooltipsLbl"
>
Show item tooltips.
</
div
>
<
div
id
=
"HideElementsLbl"
style
=
"display: none;"
>
Hide elements on rotation
</
div
>
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowXAxisGridlines"
runat
=
"server"
onclick
=
"ShowXAxisGridlines_Click(this);"
/>
</
td
>
<
td
>
Show X axis gridlines.
</
td
>
</
tr
>
<
tr
>
<
td
>
AxisYTitle:
</
td
>
<
td
>
<
telerik:RadTextBox
ID
=
"AxisYTitleTextBox"
runat
=
"server"
Width
=
"220px"
>
<
ClientEvents
OnValueChanged
=
"AxisYTitleTextBox_Changed"
/>
</
telerik:RadTextBox
>
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowItemLabels"
runat
=
"server"
Checked
=
"true"
onclick
=
"ShowItemLabels_Click(this);"
/>
</
td
>
<
td
>
Show item labels.
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowYAxisGridlines"
runat
=
"server"
onclick
=
"ShowYAxisGridlines_Click(this);"
/>
</
td
>
<
td
>
Show Y axis gridlines.
</
td
>
</
tr
>
<
tr
>
<
td
>
Axis X format:
</
td
>
<
td
>
<
telerik:RadComboBox
ID
=
"AxisXFormat"
runat
=
"server"
OnClientSelectedIndexChanged
=
"AxisXFormat_Changed"
Width
=
"220px"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"MMM/dd/yy"
/>
<
telerik:RadComboBoxItem
Text
=
"MM/dd/yyyy"
/>
<
telerik:RadComboBoxItem
Text
=
"Day: #VAL{dddd}"
/>
<
telerik:RadComboBoxItem
Text
=
"HH:mm:ss"
/>
<
telerik:RadComboBoxItem
Text
=
"yyyy MMMM"
/>
</
Items
>
</
telerik:RadComboBox
>
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowXAxis"
runat
=
"server"
Checked
=
"true"
onclick
=
"ShowXAxis_Click(this);"
/>
</
td
>
<
td
>
Show X axis.
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowXAxisStriplines"
runat
=
"server"
onclick
=
"ShowXAxisStriplines_Click(this);"
/>
</
td
>
<
td
>
Show X axis striplines.
</
td
>
</
tr
>
<
tr
>
<
td
>
Axis Y format:
</
td
>
<
td
>
<
telerik:RadComboBox
ID
=
"AxisYFormat"
runat
=
"server"
OnClientSelectedIndexChanged
=
"AxisYFormat_Changed"
Width
=
"220px"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"N"
/>
<
telerik:RadComboBoxItem
Text
=
"C"
/>
<
telerik:RadComboBoxItem
Text
=
"Amount: #VAL{C0}"
/>
</
Items
>
</
telerik:RadComboBox
>
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowYAxis"
runat
=
"server"
Checked
=
"true"
onclick
=
"ShowYAxis_Click(this);"
/>
</
td
>
<
td
>
Show Y axis.
</
td
>
<
td
>
<
asp:CheckBox
ID
=
"ShowYAxisStriplines"
runat
=
"server"
Checked
=
"true"
onclick
=
"ShowYAxisStriplines_Click(this);"
/>
</
td
>
<
td
>
Show Y axis striplines.
</
td
>
</
tr
>
<
tr
>
<
td
>
Chart item format:
</
td
>
<
td
>
<
telerik:RadComboBox
ID
=
"ChartItemFormat"
runat
=
"server"
OnClientSelectedIndexChanged
=
"ItemsFormat_Changed"
Width
=
"220px"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"N"
/>
<
telerik:RadComboBoxItem
Text
=
"C"
/>
<
telerik:RadComboBoxItem
Text
=
"Amount: #Y{C0}"
/>
</
Items
>
</
telerik:RadComboBox
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
</
table
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
Skin
=
"Telerik"
DecoratedControls
=
"All"
/>
</
form
>
</
body
>
</
html
>