RadFormDecorator and GridHTMLEditorColumn

[Jeanne]

I have a grid with a GridHTMLEditorColumn containing, obviously, HTML. When I access the value of the cell client-side it appears as if the RadFormDecorator is attempting to decorate controls INSIDE the GridHTMLEditorColumn. For example, this is what it does to a button:
    <a class="rfdSkinnedButton" href="javascript:void(0)">
      <button id="Button3" class="rfdDecorated" tabIndex="-1">

I had the same problem using just a GridBoundColumn and a GridTemplateColumn containing a textarea.

How do I get the RadFormDecorator to leave my HTML data alone without disabling it completely (which might be difficult, since it is on the Master Page)?

[Tsvetoslav]

Hi Jeanne,

Unfortunately, you cannot exclude specific controls (not specific control types) from the decoration process. What you can do, however, is to wrap the controls to be decorated in a panel and set its ID as DecorationZone to the RadFormDecorator.

Hope it helps.

All the best,
Tsvetoslav
the Telerik team

[Jeanne]

The problem is that what it is decorating is NOT controls, it is XML DATA! The data happens to look somewhat like HTML (it contains a <button> tag, for example), but it is NOT intended to be treated as such by the browser (or RadFormDecorator). I even take the step (in the ItemDataBound event) of encoding the data, which should be sufficient to keep it intact (it is for the browser). But when, on the client side, I pull out that data to display it to the user, it has been sprinkled with rfdXxx classes and other unwanted markup.

Dim oItem As GridDataItem = DirectCast(e.Item, GridDataItem)
oItem("FormXML").Text = Server.HtmlEncode(oItem("FormXML").Text)

In addition, I think Telerik got the whole "which controls to decorate" idea completely backwards! Instead of taking a complex page that is probably part of a master/content page set, which is the way most web sites are designed these days, and trying to specify that only one small area SHOULD be decorated, wouldn't it make more sense to be able to specify one small, distinct area that should NOT be decorated? The whole point of master/content pages is to keep your content looking consistent. If you suddenly interject a "only decorate this small area" into the mix that's going to kill your consistentcy by messing with the master page and other common controls too. By being able to specify "do not decorate" for one small area you could avoid some of the problems that RadFormDecorator injects (which can be many), without messing with the look of the whole page. I don't think Telerik thought this through very well. And based on other threads I've read in the forums, I think many posters would agree. I've never seen a poster reply "Thanks. Being able to tell RadFormDecorator to suddenly stop decorating controls on this entire page (including the master page and other content areas) to keep it from messing with one small area (which I can specifically decorate) solves my whole problem!" What I have seen is posters asking "Why can't I just tell RadFormDecorator to stop messing with just the one small area?" It's like telling people they can paint the whole room, including the windows, doors, light switches, etc., or they can paint just specific windows and doors, but they can't paint the room and leave the windows and doors alone. That's backward! PLEASE consider adding DoNotDecorateZones (and possibly DoNotDecorateControlIDs) to the next release!

[Bozhidar]

Hi,

If I understand correctly, you would like to have a property in RadFormDecorator that defines a zone, which could be fully or partially decorated. For Example, to have a div, where all checkboxes not to be decorated.

Actually RadFormDecorator has such a property called DecorationZoneID. It defines a zone, where you could remove all decorations are to remove it from a few chosen elements. Partial Page Decoration Demo shows the functionality.

I am also including another example showing three decorated zones - a zone with full decoration, a zone with partial, where buttons and chekboxes are not decorated, and a zone where all elements are not decorated:

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" Skin="Forest"
        DecorationZoneID="Main" />
    <telerik:RadFormDecorator ID="rfd2" runat="server" DecoratedControls="All" Skin="Black"
        DecorationZoneID="partialDecoration" ControlsToSkip="Buttons, Checkboxes" />
    <telerik:RadFormDecorator ID="rfd3" runat="server" Skin="Hay" DecorationZoneID="skipAll"
        ControlsToSkip="All" />
    <div id="Main">
        <h4>
            Decorates all controls</h4>
        <br />
        <asp:TextBox runat="server"></asp:TextBox><br />
        <br />
        <asp:Button runat="server" Text="Decorated button" /><br />
        <br />
        <asp:CheckBox runat="server" Text="Decorated  Checkbox" /><br />
        <br />
        <asp:RadioButton runat="server" Text="Decorated Radio" />
    </div>
    <div id="partialDecoration">
        <h4>
            Partial Decoration - Buttons and checkboxes are not decorated</h4>
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Decorated button" /><br />
        <br />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Decorated  Checkbox" /><br />
        <br />
        <asp:RadioButton ID="RadioButton1" runat="server" Text="Decorated Radio" />
    </div>
    <div id="skipAll">
        <h4>
            Skip to decorate all controls</h4>
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
        <br />
        <asp:Button ID="Button2" runat="server" Text="Decorated button" /><br />
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Decorated  Checkbox" /><br />
        <br />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="Decorated Radio" />
    </div>
    </form>
</body>
</html>

All the best,
Bozhidar
the Telerik team

[Jeanne]

That MAY do what I want. The documentation for RadFormDecorator is sorely lacking. It makes very brief mention of the ControlsToSkip and DecoratoredControls properties, but gives no real examples of how they are used. It doesn't mention the DecorationZoneID property at all (I found out about that through another forum posting. There's also no mention that one can include multiple RadFormDecorator's on a page! I was under the impression that only one was allowed.

I'm still not completely sure if it will work. The example you linked to is nice, but doesn't address issues such as:

1. Can I nest decoration zones? Can I specify that a zone is decorated, but then specify that a zone within that is not decorated?
2. How does this work in MasterPage/ContentPage scenarios (related to #1)? Using MasterPages and ContentPages is very popular now. Can I specify on the master page that everything is to be decorated, but then on a content page omit certain zones and/or controls?

[Bozhidar]

Hi,

Excuse us if the documentation is not detailed, we will do our best to fix that issue. And straight to your questions:

Can I nest decoration zones? Can I specify that a zone is decorated, but then specify that a zone within that is not decorated?

1. You could nest decoration zones.
2. You could not specify that a zone is decorated, and next to nest a zone that will not be decorated. The reason is that the decoration zone, is wrapped into a DIV element, and through that element we cascade to decorate the elements. Even if we remove the CSS classes from the nested DIV, it will inherit the CSS classes form his parent. In shortly - if the parent zone has Sunset skin, and the child zone has Forest skin - it will work fine, as the nested Forest zone will have its own Forest CSS classes. However, if we remove the Forest CSS classes, the nested DIV will inherit the styles from the Sunset zone, and all form elements will be Sunset skinned.
3. But there is a small trick, that you could try to skip the decoration. If you put a CssClass property to the element, it will skip the decoration, nevertheless if it is in the parent or child zone, or if you are using only one RadFormDecorator in the page. When you put CssClass property to the ASPX element or class to the HTML element, RadFromDecorator prevent the element to be skinned. Check the following example:

<body style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px;
    padding-top: 0px;">
    <form id="Telerik" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
        Skin="Office2010Black" DecorationZoneID="OfficeBlack" />
    <telerik:RadFormDecorator ID="RadFormDecorator2" runat="server" DecoratedControls="All"
        Skin="Forest" DecorationZoneID="ForestZone" />
    <telerik:RadFormDecorator ID="RadFormDecorator3" runat="server" DecoratedControls="All"
        Skin="Sunset" DecorationZoneID="SunsetZone" />
    <div style="border: 5px solid red;">
        <div id="OfficeBlack">
            <asp:Button ID="rfd1" runat="server" Text="Office2010Black" />
            <div id="ForestZone">
                <asp:Button ID="rfd2" runat="server" Text="Forest" />
                <div id="SunsetZone">
                    <asp:Button ID="rfd3" runat="server" Text="Sunset" />
                    <asp:Button ID="rfd4" runat="server" Text="Not Decorated" CssClass="skipDecoration" />
                </div>
            </div>
        </div>
    </div>
    </form>
</body>

I have three nested levels. The first level contains Office2010Black skinned button. Then I have nested in it button Forest skinned. And then I have nested in it two more buttons, that should be Sunset skinned, but only the first one is skinned as it the other has: CssClass="skipDecoration" which prevents the butoon to be decorated.

How does this work in MasterPage/ContentPage scenarios (related to #1)? Using MasterPages and ContentPages is very popular now. Can I specify on the master page that everything is to be decorated, but then on a content page omit certain zones and/or controls?

Attached is DecorationZones.zip containing small project that contains the above sample code presnted into a single ASPX page and also into a MasterPage and ContentPage. It works as expected.

Hope that the provided examples answeted to your questions.

Greetings,
Bozhidar
the Telerik team