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

7 posts, 0 answers
  1. Steve Holdorf
    Steve Holdorf avatar
    119 posts
    Member since:
    Apr 2010

    Posted 08 Jul 2010 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve Holdorf
    Steve Holdorf avatar
    119 posts
    Member since:
    Apr 2010

    Posted 09 Jul 2010 Link to this post

    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 
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Jul 2010 Link to this post

    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
  6. Steve Holdorf
    Steve Holdorf avatar
    119 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2010 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jul 2010 Link to this post

    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
  8. Steve Holdorf
    Steve Holdorf avatar
    119 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017