This is a migrated thread and some comments may be shown as answers.

Chrome specific issue when used silverlight control inside RadPageView control

3 Answers 51 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Sampada asked on 19 Apr 2013, 11:00 AM

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>

Chrome specific issue when used silverlight control inside RadPageView control

3 Answers, 1 is accepted