Promoting SkinChanged event to RadControls in RadWindow?

16 posts, 1 answers
  1. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 25 Nov 2009 Link to this post

    Hi,

    I'm rather new to this Telerik stuff, so please forgive me if I'm missing something obvious...

    I have a "main page" with the RadSplitter and some panels, including a RadPanelBar for page navigation and a RadSkinManager for selecting the skin. From this PanelBar I'm opening RadWindows which will show the content pages (.aspx) inside the generated IFrame. Now if I change the skin with the SkinManager, how to I promote this change to the content pages in the RadWindows?

    Thanks!
  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 25 Nov 2009 Link to this post

    Hello Jens,

    Since the main page and the RadWindow content are two separate windows, you may consider using two RadSkinManager instances (only the one on the main page can have the combobox skin options exposed) on both pages and synchronize the changes made by the end user.

    Hence when the user chooses a skin from the skin chooser on the main page, you will need to reload the RadWindow content page and propagate the skin for the controls in it programmatically.

    Alternatively, utilize the new ContentTemplate feature of RadWindow - thus the controls which reside in it will actually be on the main page and you will be able to use a single RadSkinManager to modify their look and feel.

    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 25 Nov 2009 Link to this post

    Hi Sebastian,

    thanks for your reply. How would I "propagate the skin for the controls in it programmatically"?


  5. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 25 Nov 2009 Link to this post

    Hello Jens,

    This can be done in the PageLoad handler of the RadWindow content page (for example). Note that I updated my previous reply and you may consider the alternative option as well.

    Best,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 25 Nov 2009 Link to this post

    Thanks again Sebastian.

    It seems, however, I'm having a general problem with the SkinManager. Isn't this little piece of code supposed to create an ajaxified (I like that term, by the way ;-) drop combo with the available skins?
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadSkinManager1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadSkinManager1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True"
        </telerik:RadSkinManager> 
        <br /> 
        <asp:Label ID="Label1" runat="server" Text="<%= DateTime.Now.ToLongTimeString() %>"></asp:Label> 
     
    Well, it does, but it's not working as I'd expect. Upon postback, the items in the drop combo will have lost their formatting completely... Am I doing something wrong?
  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 27 Nov 2009 Link to this post

    Hello Jens,

    In this scenario you will need to set explicitly the EnableAjaxSkinRendering property of the embedded skin chooser (RadComboBox) to true. The same is true for other RadControls on the page which has their skin modified through the RadSkinManager control.

    Here is a sample case that I tested locally which worked as expected:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadSkinManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSkinManager1" />
                    <telerik:AjaxUpdatedControl ControlID="rMenu" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True" />
    <telerik:RadMenu ID="rMenu" runat="server">
      <Items>
        <telerik:RadMenuItem Text="Item1" />
        <telerik:RadMenuItem Text="Item2" />
      </Items>
    </telerik:RadMenu>

    protected void Page_Load(object sender, EventArgs e)
     {
         EnableAjaxRendering();
     }
     protected void EnableAjaxRendering()
     {
         RadComboBox combo = RadSkinManager1.FindControl("SkinChooser") as RadComboBox;
         combo.EnableAjaxSkinRendering = true;
         rMenu.EnableAjaxSkinRendering = true;
     }

    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 27 Nov 2009 Link to this post

    Hi Sebastian,

    thanks again, that fixes it! Quite obvious once you know ;-)

    Related to this, I have another (minor/cosmetic) issue: When assigning a with of 100% to a RadCombobox (it's the SkinChooser in this case, but applies to other RadComboBoxes as well), there's a small (2-3 pixels) white vertical bar between the edit portion and the drop button of the combobox - at least in IE8. Works fine in Firefox though...
  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 02 Dec 2009 Link to this post

    Hello Jens,

    I tried to reproduce the issue locally but my attempts were not successful. It is also strange that the discrepancy is present under IE 8 only and FireFox renders the combo skin chooser as expected.

    Is it possible for you to provide a live url where the visual glitch can be seen under IE? You may also examine the rendered html of the skin chooser using IE developer toolbar as it can help us track down the cause of the unwanted effect.

    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 04 Dec 2009 Link to this post

    Hi Sebastian,

    it was rather difficult to reproduce, but I was successful. It's a rather special case, but here you go:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <telerik:RadSplitter ID="Radsplitter1" runat="server" Height="100%" Width="100%" 
            FullScreenMode="True" SplitBarsSize=""
            <telerik:RadPane ID="LeftPane" runat="server" Width="22"
                <telerik:RadSlidingZone ID="LeftSlidingZone" runat="server" Width="22"
                    <telerik:RadSlidingPane ID="LeftSlidingPane2" Title="Profil" runat="server" Width="250"
                        <table style="width: 100%;"
                            <tr> 
                                <td> 
                                    Skin: 
                                </td> 
                                <td> 
                                    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True" Skin="Office2007" 
                                        PersistenceMode="Cookie"
                                    </telerik:RadSkinManager> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    Sprache: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="100%" ExpandDelay="0" 
                                        Text="Bla"
                                        <Items> 
                                            <telerik:RadComboBoxItem runat="server" Text="de-DE" Value="de-DE" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="de-AT" Value="de-AT" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="en-US" Value="en-US" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="en-EN" Value="en-EN" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="jp-JP" Value="jp-JP" /> 
                                        </Items> 
                                    </telerik:RadComboBox> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    Formate: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="100%"
                                        <Items> 
                                            <telerik:RadComboBoxItem runat="server" Text="de-DE" Value="de-DE" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="de-AT" Value="de-AT" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="en-US" Value="en-US" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="en-EN" Value="en-EN" /> 
                                            <telerik:RadComboBoxItem runat="server" Text="jp-JP" Value="jp-JP" /> 
                                        </Items> 
                                    </telerik:RadComboBox> 
                                </td> 
                            </tr> 
                        </table> 
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone></telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 
     

    And the key to this is in the code behind:
    protected void Page_Load(object sender, EventArgs e) 
       RadSkinManager1.GetSkinChooser().Width = new System.Web.UI.WebControls.Unit(100, UnitType.Percentage); 

    If I comment out this line, all the RadCombobox controls behave like expected. If I uncomment it again, all will have a 2-3 pixels white border between the edit part and the button part of the combo in IE8. I was able to work around this by using an absolute width for the boxes, but it would be nice if I didn't have to...
  11. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 04 Dec 2009 Link to this post

    Just examined it with the developer toolbar - it seems that the input element is - for some reason - wider than the surrounding td element...
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 09 Dec 2009 Link to this post

    Hello Jens,

    I tested your exact configuration (pasted in this thread) under IE 8 browser and was not able to observe the visual glitch you described (see the enclosed screenshot). Am I missing something obvious? Let me know how to proceed with our investigation.
     
    Best regards,

    Sebastian
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 09 Dec 2009 Link to this post

    Hi Sebastian,

    thanks for your efforts. Did you include the code line from the page_load event where the width of the chooser control is set programmatically? For me, that's exactly what's causing the problem... if I comment out that line, everything's fine.

    As I've just discovered the attachment option (a bit late indeed ;-) I'm attaching a screenshot of mine...

  14. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 09 Dec 2009 Link to this post

    Hi Jens,

    Yes, I included that line of code, however the skin chooser combo from your screenshot seems a bit stretched as opposed to my test case. Can you specify what the reason for that is? It can lead us to the source of the issue to address it asap.

    Regards,
    Sebastian
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  15. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 10 Dec 2009 Link to this post

    Hi Sebastian,

    I'm afraid I have no idea why it's behaving differently for you. I've taken the code I posted here and made a new page of it and shows the exact same problem. I've set up live page for you to test here.

    Thanks again for your efforts, much appreciated!

    Jens
  16. Answer
    Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 15 Dec 2009 Link to this post

    Hello Jens,

    Thank you for the live example - I successfully reproduced the glitch locally. It appeared to be IE8-specific and the following explicit css class setting should address it in your particular scenario:

    .RadComboBox table
    {
      width: auto !important;
    }

    Kind regards,

    Sebastian
    the Telerik team

     


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. Jens
    Jens avatar
    12 posts
    Member since:
    Mar 2009

    Posted 15 Dec 2009 Link to this post

    Hi Sebastian,

    thanks - works like a charm! I guess you will include that fix in future releases?

    Kudos to you & the support team for not giving up on this - although I'm just a trial customer (yet!). I'm very impressed.

    Regards,
    Jens



Back to Top
UI for ASP.NET Ajax is Ready for VS 2017