I am having 4 RadAjaxPanels with radhtmlchart controls. And I want to update/control individually each paneI with different skins.
I have two drop down list boxes for Panel No and Color and when user clicks 'Update' button, I am calling function to invoke ajaxRequestwithTarget, with arguments(panel no and color selected).
and on the server side I am having the following logic
protected void RadAjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string argument = (e.Argument);
String[] argArray = argument.Split(",".ToCharArray());
switch (argArray[0])
{
case "1":
RadSkinManager1.ApplySkin(RadHtmlChart1, argArray[1]);
lblChart1.Text = argArray[1];
break;
case "2":
RadSkinManager1.ApplySkin(RadHtmlChart2, argArray[1]);
lblChart2.Text = argArray[1];
break;
case "3":
RadSkinManager1.ApplySkin(RadHtmlChart3, argArray[1]);
lblChart3.Text = argArray[1];
break;
case "4":
RadSkinManager1.ApplySkin(RadHtmlChart4, argArray[1]);
lblChart4.Text = argArray[1];
break;
default:
break;
}
The logic works fine the first time, able to apply different skins to all the four panels..But it doens't work when I want to reapply another skin on them. Can we apply Skin only once to the controls. I am unable to understand what would be the reason.
Thank you,
Madhavi
I have two drop down list boxes for Panel No and Color and when user clicks 'Update' button, I am calling function to invoke ajaxRequestwithTarget, with arguments(panel no and color selected).
and on the server side I am having the following logic
protected void RadAjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string argument = (e.Argument);
String[] argArray = argument.Split(",".ToCharArray());
switch (argArray[0])
{
case "1":
RadSkinManager1.ApplySkin(RadHtmlChart1, argArray[1]);
lblChart1.Text = argArray[1];
break;
case "2":
RadSkinManager1.ApplySkin(RadHtmlChart2, argArray[1]);
lblChart2.Text = argArray[1];
break;
case "3":
RadSkinManager1.ApplySkin(RadHtmlChart3, argArray[1]);
lblChart3.Text = argArray[1];
break;
case "4":
RadSkinManager1.ApplySkin(RadHtmlChart4, argArray[1]);
lblChart4.Text = argArray[1];
break;
default:
break;
}
The logic works fine the first time, able to apply different skins to all the four panels..But it doens't work when I want to reapply another skin on them. Can we apply Skin only once to the controls. I am unable to understand what would be the reason.
Thank you,
Madhavi
3 Answers, 1 is accepted
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 05 Dec 2014, 04:18 PM
Hi ,
I am attaching my code for better understanding of my problem. I was able to apply different skins to all the panels first time. But it doesn't work second time. The label in the panels gets updated thought. I appreciate your thoughts and inputs, where I am doing wrong.
(This is Default.aspx)
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<asp:HiddenField ID="HiddenPanelNo" runat="server" />
<asp:HiddenField ID="HiddenSkinType" runat="server" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Default" ></telerik:RadSkinManager>
<telerik:RadCodeBlock runat="server" ID="codeBlock">
<script type="text/javascript">
function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function OnClientSelectedIndexChangeEvent(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenSkinType.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function invokeAjaxrequest() {
var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
var hiddenField2 = document.getElementById("<%=HiddenSkinType.ClientID %>");
var argumentslist = hiddenField.value + "," + hiddenField2.value;
switch (hiddenField.value) {
case "1":
$find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", argumentslist);
break;
case "2":
$find("<%= RadAjaxPanel2.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel2.UniqueID %>", argumentslist);
break;
case "3":
$find("<%= RadAjaxPanel3.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel3.UniqueID %>", argumentslist);
break;
case "4":
$find("<%= RadAjaxPanel4.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel4.UniqueID %>", argumentslist);
break;
default:
alert("Missing Information to display Chart");
break;
}
}
</script>
</telerik:RadCodeBlock>
<div>
<div>
<telerik:RadComboBox ID="radComBox" runat="server" EnableViewState="true" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedHandler">
</telerik:RadComboBox>
<telerik:RadComboBox ID="MySkinChooser" EnableViewState="true" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangeEvent">
<Items>
<telerik:RadComboBoxItem Text="Vista" Value="Vista" />
<telerik:RadComboBoxItem Text="WebBlue" Value="WebBlue"/>
<telerik:RadComboBoxItem Text="Outlook" Value="Outlook"/>
<telerik:RadComboBoxItem Text="Sunset" Value="Sunset" />
<telerik:RadComboBoxItem Text="Hay" Value="Hay" />
<telerik:RadComboBoxItem Text="Web20" Value="Web20" />
<telerik:RadComboBoxItem Text="Black" Value="Black" />
<telerik:RadComboBoxItem Text="Forest" Value="Forest" />
<telerik:RadComboBoxItem Text="Metro" Value="Metro" />
<telerik:RadComboBoxItem Text="BlackMetroTouch" Value="BlackMetroTouch" />
<telerik:RadComboBoxItem Text="Default" Value="Default" Selected="true" />
</Items>
</telerik:RadComboBox>
<input type="button" value="Apply Changes" onclick="invokeAjaxrequest();" />
</div>
<div id="div1" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left; height:inherit; width:inherit; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart1" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true" style="text-align:center;width:100px;height:20px;"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" BorderWidth="5px" Height="240px" Width="440px" BorderColor="Aqua" >
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div2" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart2" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div3" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;">
<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart3" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div4" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel4" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart4" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
</div>
</form>
</body>
</html>
(and in Default.aspx.cs file) , I am handling the ajaxRequest withe the following code.
protected void Rad_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string argument = (e.Argument);
String[] argArray = argument.Split(",".ToCharArray());
switch (argArray[0])
{
case "1":
RadSkinManager1.ApplySkin(RadHtmlChart1, argArray[1]);
lblChart1.Text = argArray[1];
break;
case "2":
RadSkinManager1.ApplySkin(RadHtmlChart2, argArray[1]);
lblChart2.Text = argArray[1];
break;
case "3":
RadSkinManager1.ApplySkin(RadHtmlChart3, argArray[1]);
lblChart3.Text = argArray[1];
break;
case "4":
RadSkinManager1.ApplySkin(RadHtmlChart4, argArray[1]);
lblChart4.Text = argArray[1];
break;
default:
break;
}
}
Thank you,
Madhavi
I am attaching my code for better understanding of my problem. I was able to apply different skins to all the panels first time. But it doesn't work second time. The label in the panels gets updated thought. I appreciate your thoughts and inputs, where I am doing wrong.
(This is Default.aspx)
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<asp:HiddenField ID="HiddenPanelNo" runat="server" />
<asp:HiddenField ID="HiddenSkinType" runat="server" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Default" ></telerik:RadSkinManager>
<telerik:RadCodeBlock runat="server" ID="codeBlock">
<script type="text/javascript">
function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function OnClientSelectedIndexChangeEvent(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenSkinType.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function invokeAjaxrequest() {
var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
var hiddenField2 = document.getElementById("<%=HiddenSkinType.ClientID %>");
var argumentslist = hiddenField.value + "," + hiddenField2.value;
switch (hiddenField.value) {
case "1":
$find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", argumentslist);
break;
case "2":
$find("<%= RadAjaxPanel2.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel2.UniqueID %>", argumentslist);
break;
case "3":
$find("<%= RadAjaxPanel3.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel3.UniqueID %>", argumentslist);
break;
case "4":
$find("<%= RadAjaxPanel4.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel4.UniqueID %>", argumentslist);
break;
default:
alert("Missing Information to display Chart");
break;
}
}
</script>
</telerik:RadCodeBlock>
<div>
<div>
<telerik:RadComboBox ID="radComBox" runat="server" EnableViewState="true" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedHandler">
</telerik:RadComboBox>
<telerik:RadComboBox ID="MySkinChooser" EnableViewState="true" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangeEvent">
<Items>
<telerik:RadComboBoxItem Text="Vista" Value="Vista" />
<telerik:RadComboBoxItem Text="WebBlue" Value="WebBlue"/>
<telerik:RadComboBoxItem Text="Outlook" Value="Outlook"/>
<telerik:RadComboBoxItem Text="Sunset" Value="Sunset" />
<telerik:RadComboBoxItem Text="Hay" Value="Hay" />
<telerik:RadComboBoxItem Text="Web20" Value="Web20" />
<telerik:RadComboBoxItem Text="Black" Value="Black" />
<telerik:RadComboBoxItem Text="Forest" Value="Forest" />
<telerik:RadComboBoxItem Text="Metro" Value="Metro" />
<telerik:RadComboBoxItem Text="BlackMetroTouch" Value="BlackMetroTouch" />
<telerik:RadComboBoxItem Text="Default" Value="Default" Selected="true" />
</Items>
</telerik:RadComboBox>
<input type="button" value="Apply Changes" onclick="invokeAjaxrequest();" />
</div>
<div id="div1" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left; height:inherit; width:inherit; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart1" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true" style="text-align:center;width:100px;height:20px;"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" BorderWidth="5px" Height="240px" Width="440px" BorderColor="Aqua" >
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div2" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart2" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div3" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;">
<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart3" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
<div id="div4" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<telerik:RadAjaxPanel ID="RadAjaxPanel4" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart4" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</telerik:RadAjaxPanel>
</div>
</div>
</form>
</body>
</html>
(and in Default.aspx.cs file) , I am handling the ajaxRequest withe the following code.
protected void Rad_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string argument = (e.Argument);
String[] argArray = argument.Split(",".ToCharArray());
switch (argArray[0])
{
case "1":
RadSkinManager1.ApplySkin(RadHtmlChart1, argArray[1]);
lblChart1.Text = argArray[1];
break;
case "2":
RadSkinManager1.ApplySkin(RadHtmlChart2, argArray[1]);
lblChart2.Text = argArray[1];
break;
case "3":
RadSkinManager1.ApplySkin(RadHtmlChart3, argArray[1]);
lblChart3.Text = argArray[1];
break;
case "4":
RadSkinManager1.ApplySkin(RadHtmlChart4, argArray[1]);
lblChart4.Text = argArray[1];
break;
default:
break;
}
}
Thank you,
Madhavi
0
Accepted
Hello,
I have updated your project to work as excepted. Please review the attached sample. The ViewState of the charts should be disabled or you should set the Skin later.
Regards,
Peter Filipov
Telerik
I have updated your project to work as excepted. Please review the attached sample. The ViewState of the charts should be disabled or you should set the Skin later.
Regards,
Peter Filipov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 10 Dec 2014, 02:53 PM
It worked. Thanks a lot. I appreciate your help.