Can a user control be excluded from RadFormDecorator's action?

[SUNIL]

I have an aspx page that has a user control with an id of MainMenu. This page also has a form decorator, which is decorating the elements in MainMenu user control.

Is it possible to exclude the user control MainMenu from having form decorator classes being applied to it? If yes, then how would I do it?

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" RenderMode="Auto"  EnableAjaxSkinRendering="False"/>
<uc1:MainMenu runat="server" ID="MainMenu"/>

[Rumen]

Hi Sunil,

While the RadFormDecorator does not provide a direct option to exclude a specific user control like MainMenu from being decorated, you can control which parts of the page are decorated using the DecorationZoneID property. This allows you to specify only certain zones on the page to apply the form decorator.

You can leverage this property to ensure that only the desired areas of your page are decorated, while excluding the MainMenu user control. For example:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="panel1"/>
<div id="panel1" runat="server">
    <!-- Elements you want decorated go here -->
</div>
<uc1:MainMenu runat="server" ID="MainMenu"/>

In this case, the MainMenu user control will not be decorated since it’s outside the specified DecorationZoneID.

For more information, you can refer to the following demo that shows how to decorate specific parts of a page: Partial Page Decoration.

This approach helps in selectively applying decoration styles, allowing you to maintain control over which sections of your page get decorated.

Regards,
Rumen
Progress Telerik

[SUNIL]

Hi Rumen,

Can there be multiple DecorationZoneId for a single form FormDecorator? I think only one zone can be specified. It seems that if there are multiple zones that need to be themed by the FormDecorator then there should be multiple FormDecorators in that page

[Rumen]

Hi Sunil,

You are correct that the RadFormDecorator control supports only a single DecorationZoneID property. If you need to apply the form decorator to multiple zones on the same page, you will indeed need to use multiple RadFormDecorator instances, each with its own DecorationZoneID.

Here's an example of how you can achieve this:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="panel1" />
<telerik:RadFormDecorator ID="RadFormDecorator2" runat="server" DecorationZoneID="panel2" />

<div id="panel1" runat="server">
    <!-- Elements you want decorated in the first zone -->
</div>

<div id="panel2" runat="server">
    <!-- Elements you want decorated in the second zone -->
</div>

<uc1:MainMenu runat="server" ID="MainMenu" />

In this example, panel1 and panel2 will be decorated by their respective RadFormDecorator controls, while the MainMenu user control will remain undecorated since it is outside of both specified zones.

If you want to keep a single instance of the FormDecorator but decorate multiple elements you can use the decorate(element) client side method shown in the Client-side Programming Overview article, 

Here is an example:

        <script type="text/javascript">
            function pageLoad() {
                var rfd1 = $find('<%=RadFormDecorator1.ClientID %>');
                var decoratedZone2 = document.getElementById("tr2");
                var decoratedZone3 = document.getElementById("tr3");
                rfd1.decorate(decoratedZone2);
                //rfd1.decorate(decoratedZone3);
            }
        </script>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Material"
            EnableRoundedCorners="True" DecorationZoneID="tr1" />
        <table>
            <tr id="tr1">
                <td>
                    <label>
                        Decorated by DecorationZoneID:</label>
                </td>
                <td>
                    <input type="text" id="input1" value="" />
                </td>
            </tr>
            <tr id="tr2">
                <td>
                    <label>
                        Decorated by calling decorate() method:</label>
                </td>
                <td>
                    <input type="text" id="Text2" value="" />
                </td>
            </tr>
            <tr id="tr3">
                <td>
                    <label>
                        Not decorated</label>
                </td>
                <td>
                    <input type="text" id="Text3" value="" />
                </td>
            </tr>
        </table>

 

 

Regards,
Rumen
Progress Telerik