FormDecorator on RadWindow with Content Template?

3 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 07 Sep 2011 Link to this post

    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.
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 12 Sep 2011 Link to this post

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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 12 Sep 2011 Link to this post

    Hi Telerik,

    My bad. This worked. Thanks.

    Sean
Back to Top