Docks with built in skin

6 posts, 0 answers
  1. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 02 Jan 2010 Link to this post

    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.






  2. Christopher Bishop
    Christopher Bishop avatar
    50 posts
    Member since:
    May 2008

    Posted 03 Jan 2010 Link to this post

    Change <asp:Literial to <asp:Label and see if that doesn't fix your problem :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 03 Jan 2010 Link to this post

    Thanks Christopher but I had tried that.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Jan 2010 Link to this post

    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.
  6. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 08 Jan 2010 Link to this post

    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
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 12 Jan 2010 Link to this post

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