Docks with built in skin

[Shane Grant]

I am having a problem with some of the built in skins and the RadDock.

It appears that when I update certain controls with RadAjax, specifically content in RadDocks the background color is not correct for some skins. I have uploaded a sample so you can see what I am talking about: YouTube link

You will first see the page as it is when loaded, then the OnClick event of the RadTreeView on the left changes the text within the RadDock. The RadDOck is as follows:

        <telerik:RadDock ID="dockHelp" runat="server" Title="Help" EnableRoundedCorners="true">
            <ContentTemplate>
                <h2><asp:Literal ID="helpTitle" runat="server" /></h2>
                <p><asp:Literal ID="helpContent" runat="server" /></p>
            </ContentTemplate>
        </telerik:RadDock>

and the OnClick():

protected void treeAdmin_NodeClick(object sender, RadTreeNodeEventArgs e)
        {
            UpdateHelp();
        }

        protected void UpdateHelp()
        {
            if (treeAdmin.SelectedNode != null)
            {
                switch (treeAdmin.SelectedNode.Text)
                {
                    case "System Utilities":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        helpContent.Text = help_systemutilities;
                        break;
                    case "Locked Documents":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Users and Groups":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Groups":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Users":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Filing System":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Deparments":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "Workflows":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    case "User Defined Lists":
                        helpTitle.Text = treeAdmin.SelectedNode.Text;
                        break;
                    default:
                        helpTitle.Text = "Managing Your System";
                        helpContent.Text = help_general;
                        break;
                }
            }
            else
            {
                helpTitle.Text = "Managing Your System";
                helpContent.Text = help_general;
            }
        }

And just to ensure I give you all of the details I am using the following RadAjaxManagerProxy and RadAjaxLoadingPanel:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="treeAdmin">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="helpTitle" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="helpContent" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

 
This issue occurs anytime I update any controls with Ajax that are inside a RadDock and the Skin is set to a skin that has a different background than what the Dock has for that skin. (Examples: Black, Hay)

I have tried to simply update the entire RadDock with the AjaxManager, but that throws and error:

Telerik.Web.UI.RadDockZone can contain only controls of type Telerik.Web.UI.RadDock

Your help is appreciated.

[Christopher Bishop]

Change <asp:Literial to <asp:Label and see if that doesn't fix your problem :)

[Shane Grant]

Thanks Christopher but I had tried that.

[Pero]

Hello Shane,

I recreated the problem locally when using RadFormDecorator with Skin="Black". The problem seems to be caused by the fact that, after the AJAX request finishes, the FormDecorator control decorates (by setting a background-color the same as the one set to the <body>) the DIVs (UpdatePanels) rendered around every control ajaxified by the RadAjaxManager control - in your case these are the Literal controls placed inside the RadDock. To overcome the issue you should configure the FormDecorator to skip decorating these DIV elements. This can be done by setting the RadFormDecorator's ControlsToSkip="Zone" property. If you want the background color of the page to be black (or any other color) you should set it explicitly.

The project that I tested is attached to the thread.


Greetings,
Pero
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.

[Shane Grant]

Pero,

Thank you for the response, but this will not work because I want the users to be able to change the skin just like in the Email demo.

If I set ControlsToSkip="Zone" than it does not style most of my application.

Are there any other solutions for this?

I would like to be able to load the controls with ajax dynamically, but it is really bad looking on some of the skins.

We now we can remove skins from being displayed, but we really want to keep most of them.

Thank you,
Shane Grant

[Pero]

Hello Shane,

After testing the previously sent project, I noticed that the problem is present only with three of the skins: "Black", "Forest" and "Hay". In fact when using any of these skins the FormDecorator sets color to the background and this causes the undesired effect.

Unfortunately there is no "easy" way (like setting a property) that will make the FormDecorator skip the DIVs generated by the AjaxManager. Thus my recommendation is to programmatically ("manually") change the styles of the skipped "zones" (ControlsToSkip="Zones"). For your convenience I have slightly modified the sample project to set the background color of the <html> in the code-behind. The SkinChanged event is used for this purpose. The sample is attached to the thread.


Regards,
Pero
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.