Rank 1
Thanks,
Steve Holdorf
6 Answers, 1 is accepted
I am afraid such a behavior is not supported currently. RadSkinManager works with embedded skins only. In your case you can use some custom approach as the one demonstrated here:
http://blogs.telerik.com/vladimirenchev/posts/08-07-11/change_skins_dynamically_for_all_telerik_radcontrols.aspx
When choosing a custom skin, you will have to take care of the CSS file registration and set EnableEmbeddedSkins="false" to all affected controls.
All the best,
Dimo
the Telerik team
Rank 1
Thanks,
Steve Holdorf
What you have said is correct. My basic guidance is included in my previous reply - let us know if you need any specific information.
Greetings,
Dimo
the Telerik team
Rank 1
Default.aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
<%@ Register Src="WebUserControlScriptManagerDropDown.ascx" TagName="WebUserControlScriptManagerDropDown" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = new object[] { 1, 2, 3 };
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change Skins dynamically for all Telerik RadControls using RadPageStylist</title>
<link href="RadControls/Skins/Grid.JTTRA75.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxPanel runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
Choose your skin:
<br />
<br />
<br />
RadGrid
<telerik:RadGrid ID="RadGrid1" runat="server"
OnNeedDataSource="RadGrid1_NeedDataSource" SkinID="1" >
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
</MasterTableView>
</telerik:RadGrid>
<br />
<br />
<uc2:WebUserControlScriptManagerDropDown ID="WebUserControl2" runat="server" />
RadSlider
<telerik:RadSlider ID="RadSlider1" runat="server" />
<br />
<br />
RadTabStrip
<telerik:RadTabStrip ID="RadTabStrip1" runat="server">
<Tabs>
<telerik:RadTab Text="Tab1" />
<telerik:RadTab Text="Tab2" />
<telerik:RadTab Text="Tab3" />
<telerik:RadTab Text="Tab4" />
<telerik:RadTab Text="Tab5" />
</Tabs>
</telerik:RadTabStrip>
<br />
<br />
RadDatePicker in UserControl
<br />
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</telerik:RadAjaxPanel>
</form>
</body>
</html>
User defined control ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlScriptManagerDropDown.ascx.cs" Inherits="MyCustomRadSkinManagerCustom.WebUserControlScriptManagerDropDown" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<script language="javascript" type="text/javascript">
function selectedindexchange() {
var index = $get('<%= SkinDropDownList2.ClientID %>').selectedIndex;
var seltext = $get('<%= SkinDropDownList2.ClientID %>').options[index].text
var hf1 = $get('<%= HiddenField1.ClientID %>');
hf1.value = seltext;
var selvalue = $get('<%= SkinDropDownList2.ClientID %>').options[index].value
var hf2 = $get('<%= HiddenField2.ClientID %>');
hf2.value = selvalue;
var hf3 = $get('<%= HiddenField3.ClientID %>');
hf3.value = index;
}
</script>
<asp:HiddenField ID="HiddenField1" Value="Default" runat="server" />
<asp:HiddenField ID="HiddenField2" Value="Embeded" runat="server" />
<asp:HiddenField ID="HiddenField3" Value="0" runat="server" />
<asp:DropDownList ID="SkinDropDownList2" runat="server" AutoPostBack="true" onchange="selectedindexchange()">
<asp:ListItem Text="Default" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Hay" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Sunset" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Vista" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Office2007" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Telerik" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="Web20" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="WebBlue" Value="Embeded"></asp:ListItem>
<asp:ListItem Text="JTTRA75" Value="Custom"></asp:ListItem>
</asp:DropDownList>
User defined control ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
namespace MyCustomRadSkinManagerCustom
{
public partial class WebUserControlScriptManagerDropDown : System.Web.UI.UserControl
{
void Page_PreRender(object sender, EventArgs e)
{
ApplySkin(Page.Form);
}
public void ApplySkin(Control target)
{
if (!target.Visible)
return;
if (target is Telerik.Web.ISkinnableControl)
{
if (target is Telerik.Web.UI.RadGrid)
{
if (HiddenField2.Value != "Embeded" && HiddenField2.Value != "")
{
((Telerik.Web.ISkinnableControl)target).EnableEmbeddedSkins = false;
}
else
{
((Telerik.Web.ISkinnableControl)target).EnableAjaxSkinRendering = true;
((Telerik.Web.ISkinnableControl)target).EnableEmbeddedSkins = true;
}
((Telerik.Web.ISkinnableControl)target).Skin = this.HiddenField1.Value;
}
}
else
{
foreach (Control child in target.Controls)
{
ApplySkin(child);
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
this.SkinDropDownList2.SelectedIndex = Convert.ToInt32(HiddenField3.Value);
}
protected void SkinDropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
}
Thanks,
Steve Holdorf
When you change the RadGrid skin across postbacks, you must Rebind the control.
Regards,
Dimo
the Telerik team
Rank 1
Thanks,
Steve Holdorf