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

Adding custom skins to the embeded list of skins that can be selected by the RadSkinManager

6 Answers 127 Views
SkinManager
This is a migrated thread and some comments may be shown as answers.
Steve Holdorf
Top achievements
Rank 1
Steve Holdorf asked on 08 Jul 2010, 09:56 PM
We are using the RadSkinManager to allow the user to select embeded skins. Now, what we need to do is create our own custom skins, which we are using your online tool to do, and register them as embeded skins so that they can be selected from the RadSkinManager's drop-down list. Can you tell me how this can be done?

Thanks,


Steve Holdorf

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Jul 2010, 07:36 AM
Hi Steve,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steve Holdorf
Top achievements
Rank 1
answered on 09 Jul 2010, 12:57 PM
O.K. I understand. What I am thinking is creating a user defined asp control which merges what the skin manager provides (embeded) with a list of our user defined controls names inserted below. Now, once the user selects a skin then the control will provide the skin name with the an indicator as to which type of control was selected (i.e. embeded or custom). Then once this information is provided to the parent page the skin can be applied dynamically to the controls on the page as need be based on if it is embeded or custom. Before I begin trying to create this user defined asp control could you provide me with some basic guidance?

Thanks,


Steve Holdorf 
0
Dimo
Telerik team
answered on 09 Jul 2010, 01:00 PM
Hello Steve,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steve Holdorf
Top achievements
Rank 1
answered on 12 Jul 2010, 03:07 PM
O.K. now I do have a user defined control and one custom skin (JTTRA75) that has been added to a Default.aspx page and solution. I have added the basis of the code below. I am only using the one custom skin and embeded skins with the RadGrid on the page. What is happing is that when I select the custom skin from the user defined control dropdown list it is applied to the RadGrid the first time selected no problem. The strange thing is that when I select an embeded skin from the user defined control dropdown it is not applied to the grid the first time. What I have to do is select the custom skin from the dropdown then go back to the embeded skin and reselect it from the dropdown at which point it does get applied to the RadGrid. Please assist.

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
0
Dimo
Telerik team
answered on 12 Jul 2010, 03:29 PM
Hello Steve,

When you change the RadGrid skin across postbacks, you must Rebind the control.

Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Steve Holdorf
Top achievements
Rank 1
answered on 12 Jul 2010, 04:58 PM
O.K. I understand what you are saying about rebinding but as it turns out, we wanted the user defined dropdown control on a master page and the grid on a content page. When I applied the code to master/content; because we are now getting the full postback it works!

Thanks,


Steve Holdorf
Tags
SkinManager
Asked by
Steve Holdorf
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Steve Holdorf
Top achievements
Rank 1
Share this question
or