Promoting SkinChanged event to RadControls in RadWindow?

[Jens]

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!

[Sebastian]

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.

[Jens]

Hi Sebastian,

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

[Sebastian]

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.

[Jens]

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?

[Sebastian]

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.

[Jens]

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...

[Sebastian]

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.

[Jens]

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...

[Jens]

Just examined it with the developer toolbar - it seems that the input element is - for some reason - wider than the surrounding td element...

[Sebastian]

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.

[Jens]

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...

[Sebastian]

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.

[Jens]

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

[Sebastian]

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.

[Jens]

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