FormDecorator on RadWindow with Content Template?

[Sean]

Hi Telerik,

I am trying to re-create a RadWindow using a Content Template -- Previously, I had it created using a Navigate Url. I am finding that the RadFormDecorator isn't wanting to apply properly in this scenario?

My code:

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" DecorationZoneID="UploadDashboardWindow" Skin="Web20" />


<telerik:RadWindowManager ID="RadWindowManager1" Runat="Server" Skin="Web20" Modal="True" KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False" ReloadOnShow="True" ShowContentDuringLoad="False" Behavior="Close, Move" Title="Confirm Action" IconUrl="~/Content/Dashboard/Icons/radwindow_confirmdelete.png">
    <Windows>
        <telerik:RadWindow ID="HistoricalLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/HistoricalLocalSettings.aspx" OnClientShow="OnLocalSettingsShow" OnClientClose="OnHistoricalLocalSettingsClose" OnClientAutoSizeEnd="OnClientAutoSizeEnd" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" Title="Settings" Width="450px" AutoSize="True" AutoSizeBehaviors="Height" />
        <telerik:RadWindow ID="DashboardGlobalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/DashboardGlobalSettings.aspx" OnClientShow="OnDashboardGlobalSettingsShow" OnClientClose="OnDashboardGlobalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Global Settings" MinHeight="337px" Height="337px" Width="450px" />
        <telerik:RadWindow ID="CustomLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/CustomLocalSettings.aspx" OnClientShow="OnLocalSettingsShow" OnClientClose="OnCustomLocalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Settings" Width="450px" Height="215px" />
        <telerik:RadWindow ID="ReportWindow" Runat="Server" Title="CableSolve Report Viewer" Width="600" Height="500" OnClientClose="OnReportWindowClose" />

        <telerik:RadWindow ID="UploadDashboardWindow" Runat="Server" IconUrl="~/Content/Dashboard/Icons/drive-upload.png" OnClientClose="OnUploadDashboardClose" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Upload Dashboard" Height="150">
            <ContentTemplate>

                <fieldset id="Upload Dashboard">
                    <legend>Upload Dashboard</legend>
                    <telerik:RadUpload ID="RadUpload1" Runat="server" AllowedFileExtensions=".xml" Skin="Web20" MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="230px" BorderWidth="0px" >
                    </telerik:RadUpload>

                    <div class="BottomButton">
                        <telerik:RadButton ID="RadButton1" Runat="server" Skin="Web20" Text="Upload"/>
                    </div>
                </fieldset>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

I know the Telerik guide says not to place RadWindows with ContentTemplate inside of the RadWindowManager, but I rather like keeping the things grouped "master page -> slave page"-esque. I haven't noted any troubles with this setup yet, but if I encounter them I will reconsider that implementation.

Nevertheless, the DecorationZoneID doesn't seem to be forcing the RadWindow to become decorated. When I do not use a DecorationZoneID other things go wrong on my page, however, so I am hoping to be able to use this to target the appropriate window. The thought is that I don't actually want to decorate my base page, just the pop-up window, but now the pop-up window is part of the base page.. so, yeah.

What am I doing wrong with my implementation? Thanks.

Sean

EDIT: It seems its something to do with the DecorationZone. If I remove that it decorates the control properly.
Moreover, if I wrap the RadWindowManager in a div with ID "RadWindowsWrapper", and then set the DecorationZoneID="RadWindowsWrapper" I get -some- of the styling, but not all? I see my fieldset gain rounded corners, but it did not color properly. It colors properly if I remove the DecorationZoneID.

[Bozhidar]

Hello Sean,

I have tested with the following code:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="mng" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
        DecorationZoneID="DecoratedZoneTest" Skin="Web20" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="Server" Skin="Web20" Modal="True"
        KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False"
        Behavior="Close, Move" Title="Confirm Action" VisibleOnPageLoad="true">
        <Windows>
            <telerik:RadWindow ID="UploadDashboardWindow" runat="Server" Title="Upload Dashboard"
                Height="550" Width="550" VisibleOnPageLoad="true">
                <ContentTemplate>
                    <div id="DecoratedZoneTest">
                        <fieldset id="Upload Dashboard" style="padding: 10px; margin: 10px;">
                            <legend>Upload Dashboard</legend>
                            <telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions=".xml" Skin="Web20"
                                MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="230px"
                                BorderWidth="0px">
                            </telerik:RadUpload>
                            <div class="BottomButton">
                                <telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="Upload" />
                            </div>
                            <h5>
                                Test controls with ID zone</h5>
                            <asp:CheckBox ID="chb1" runat="server" Text="Checkbox" />
                            <asp:RadioButton ID="radio1" runat="server" Text="Radio button" />
                            <br />
                            <asp:TextBox ID="chbf1" runat="server" />
                            <asp:Button ID="btn1" runat="server" Text="ASP Button" />
                        </fieldset>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    </form>
</body>
</html>

What I did is that I didin`t wrapped the RadWindowManager into a div with the decorated ID, but the filedsed into the content template. It decorates now all colors properly as well a few more elements such as Checkbox, Radio, TextBox and Button. I do not see the rounded corners decoration in IE and Opera, but it works as expected in FireFox and Webkit.

My suggestion is to remove your decoration zone inside content template as I did it and to try again to build your form to check again what happens.

Best wishes,
Bojo
the Telerik team

[Sean]

Hi Telerik,

My bad. This worked. Thanks.

Sean