[Solved] RadDecorator not decorating zone

[robertw102]

I'm using the latest version of the controls .

Here's the setup. I have a RadFormDecorator on my Master Page and have it set to only decorate controls that within a certain zone. Now this worked on one of my pages, but on this one it didn't.

Below is the page markup:

 <div id="WebBlueZone" style="padding: 20px 5px;">
        <div style="padding-bottom: 15px; text-align: left;" class="PropertyHeaderBlueText">
            Property Inquiry
        </div>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="tablePaddingAll">
            <tr>
                <td style="width: 22%">
                    Check In Date:
                </td>
                <td style="width: 78%">
                    <telerik:RadDatePicker ID="dpCheckInDate" runat="server" SharedCalendarID="calShared">
                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                        </Calendar>
                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                    </telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="reqCheckInDate" runat="server" ControlToValidate="dpCheckInDate"
                        Display="Dynamic" ErrorMessage="Required" ValidationGroup="SubmitInquiry"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Check Out Date:
                </td>
                <td style="width: 78%">
                    <telerik:RadDatePicker ID="dpCheckOutDate" runat="server" SharedCalendarID="calShared">
                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                        </Calendar>
                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                    </telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="reqCheckOutDate" runat="server" ControlToValidate="dpCheckOutDate"
                        Display="Dynamic" ErrorMessage="Required" ValidationGroup="SubmitInquiry"></asp:RequiredFieldValidator>
                    <asp:CompareValidator ID="cvCheckOutDate" runat="server" ControlToCompare="dpCheckInDate"
                        ControlToValidate="dpCheckOutDate" Display="Dynamic" ErrorMessage="Check Out Date Cannot Be Before Or Same As Check In Date"
                        Operator="GreaterThan" Type="Date" ValidationGroup="SubmitInquiry"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:CheckBox ID="chkIsFlexible" runat="server" Text="Check off if your dates are flexible"
                        TextAlign="Left" />
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Number of Adults:
                </td>
                <td style="width: 78%">
                    <telerik:RadComboBox ID="ddlAdults" runat="server" MaxHeight="110px" Width="70px"
                        MaxLength="10" NoWrap="True">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="0" Value="0" />
                            <telerik:RadComboBoxItem runat="server" Text="1" Value="1" />
                            <telerik:RadComboBoxItem runat="server" Text="2" Value="2" />
                            <telerik:RadComboBoxItem runat="server" Text="3" Value="3" />
                            <telerik:RadComboBoxItem runat="server" Text="4" Value="4" />
                            <telerik:RadComboBoxItem runat="server" Text="5" Value="5" />
                            <telerik:RadComboBoxItem runat="server" Text="6" Value="6" />
                            <telerik:RadComboBoxItem runat="server" Text="7" Value="7" />
                            <telerik:RadComboBoxItem runat="server" Text="8" Value="8" />
                            <telerik:RadComboBoxItem runat="server" Text="9" Value="9" />
                            <telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
                            <telerik:RadComboBoxItem runat="server" Text="11" Value="11" />
                            <telerik:RadComboBoxItem runat="server" Text="12" Value="12" />
                            <telerik:RadComboBoxItem runat="server" Text="13" Value="13" />
                            <telerik:RadComboBoxItem runat="server" Text="14" Value="14" />
                            <telerik:RadComboBoxItem runat="server" Text="15" Value="15" />
                            <telerik:RadComboBoxItem runat="server" Text="16" Value="16" />
                            <telerik:RadComboBoxItem runat="server" Text="17" Value="17" />
                            <telerik:RadComboBoxItem runat="server" Text="18" Value="18" />
                            <telerik:RadComboBoxItem runat="server" Text="19" Value="19" />
                            <telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
                            <telerik:RadComboBoxItem runat="server" Text="20+" Value="21" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Number of Children:
                </td>
                <td style="width: 78%">
                    <telerik:RadComboBox ID="ddlChildren" runat="server" Width="70px" MaxHeight="110px">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="0" Value="0" />
                            <telerik:RadComboBoxItem runat="server" Text="1" Value="1" />
                            <telerik:RadComboBoxItem runat="server" Text="2" Value="2" />
                            <telerik:RadComboBoxItem runat="server" Text="3" Value="3" />
                            <telerik:RadComboBoxItem runat="server" Text="4" Value="4" />
                            <telerik:RadComboBoxItem runat="server" Text="5" Value="5" />
                            <telerik:RadComboBoxItem runat="server" Text="6" Value="6" />
                            <telerik:RadComboBoxItem runat="server" Text="7" Value="7" />
                            <telerik:RadComboBoxItem runat="server" Text="8" Value="8" />
                            <telerik:RadComboBoxItem runat="server" Text="9" Value="9" />
                            <telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
                            <telerik:RadComboBoxItem runat="server" Text="11" Value="11" />
                            <telerik:RadComboBoxItem runat="server" Text="12" Value="12" />
                            <telerik:RadComboBoxItem runat="server" Text="13" Value="13" />
                            <telerik:RadComboBoxItem runat="server" Text="14" Value="14" />
                            <telerik:RadComboBoxItem runat="server" Text="15" Value="15" />
                            <telerik:RadComboBoxItem runat="server" Text="16" Value="16" />
                            <telerik:RadComboBoxItem runat="server" Text="17" Value="17" />
                            <telerik:RadComboBoxItem runat="server" Text="18" Value="18" />
                            <telerik:RadComboBoxItem runat="server" Text="19" Value="19" />
                            <telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
                            <telerik:RadComboBoxItem runat="server" Text="20+" Value="21" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Email Address:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtEmailAddress" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="reqEmailAddress" runat="server" ControlToValidate="txtEmailAddress"
                        Display="Dynamic" ErrorMessage="Required" ValidationGroup="SubmitInquiry"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="regexEmailAddress" runat="server" ControlToValidate="txtEmailAddress"
                        Display="Dynamic" ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                        ValidationGroup="SubmitInquiry"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Verify Email Address:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtVerifyEmailAddress" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                    <asp:CompareValidator ID="cvVerifyEmailAddress" runat="server" ControlToCompare="txtEmailAddress"
                        ControlToValidate="txtVerifyEmailAddress" Display="Dynamic" ErrorMessage="Must Be Same As Email Address"
                        ValidationGroup="SubmitInquiry"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Alternate Email Address:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtAltEmailAddress" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                    <asp:RegularExpressionValidator ID="regexAltEmailAddress" runat="server" ControlToValidate="txtAltEmailAddress"
                        Display="Dynamic" ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                        ValidationGroup="SubmitInquiry"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    First Name:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtFirstName" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="reqFirstName" runat="server" ControlToValidate="txtFirstName"
                        Display="Dynamic" ErrorMessage="Required" ValidationGroup="SubmitInquiry"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Last Name:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtLastName" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Address 1:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtAddress1" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Address 2:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtAddress2" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    City:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtCity" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    State/Province:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtProvState" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Zip/Postal Code:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtPostalZipCode" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Country:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtCountry" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Phone 1:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtPhone1" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Phone 2:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtPhone2" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%">
                    Fax:
                </td>
                <td style="width: 78%">
                    <telerik:RadTextBox ID="txtFax" runat="server" MaxLength="50" Width="200px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 22%" valign="top">
                    Inquiry:
                </td>
                <td style="width: 78%" valign="top">
                    <telerik:RadTextBox ID="txtInquiry" runat="server" Height="200px" TextMode="MultiLine"
                        Width="400px">
                    </telerik:RadTextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:CheckBox ID="chkRequestReservervation" runat="server" Text="If you wish to request a reservation please check here." />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-top: 10px;">
                    <asp:Button ID="btnSubmitInquiry" runat="server" Text="Submit Inquiry" ValidationGroup="SubmitInquiry" />
                </td>
            </tr>
        </table>
    </div>
    <telerik:RadCalendar ID="calShared" runat="server" ShowOtherMonthsDays="False" ShowRowHeaders="False"
        UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">
    </telerik:RadCalendar>

Now it should be decorating the checkboxes and buttons, but for some reason it's not doing that.

Here's the FormDecorator setup on my master page:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="WebBlue" DecoratedControls="Zone"
            EnableRoundedCorners="False" DecorationZoneID="WebBlueZone" />

Do you notice any problem on my page that is preventing the control from being decorated?

[robertw102]

Ok, I've noticed something about the post I made before. It seems that if I just have DecoratedControls="Zone", then only the Zone with the DecorationZoneID="WebBlueZone" is the only element who gets a class added to it, but it's controls aren't decorated.

If I change the DecoratedControls collection to, DecoratedControls="CheckBoxes, RadioButtons, Buttons, Textbox, Textarea", then the area where I set the zone id gets the respective controls decorated. So I solved my own problem, but I also found another problem with the RadFormDecorator control.

It seems if I don't have an element on the form with the ZoneID set, it seems to break all the controls, be it a RadControl or just a normal HTML element. So if you change the line, <div id="WebBlueZone" - to - <div id="WebBlueZone2" (which doesn't exist), all the controls on the page will break. I get the same effect if I remove, id="WebBlueZone", from the page altogether.

If you could test this out on your side and see if I've done something wrong.

[Georgi Tunev]

Hello robertw102,

Thank you for bringing this problem to our attention. We investigated the case and we recognize this as a bug on our side. We will do our best to have it fixed for the service pack in 2 weeks.

For the time being I suggest to put a hidden div with such ID (same as the one set in the DecorationZoneID) on the pages where you don't have such zone declared.

Your points were updated.

All the best,
Georgi Tunev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[robertw102]

I've just noticed that the behavior I mentioned before about the RadFormDecorator breaking the RadControls when the zone id is not on the page has reappeared again in the latest version of the controls 2009.2.826.35. This problem was fixed in the other versions I used for .NET 2.0 after I reported the problem, but it occurs in this version, which is the .NET 3.5 one.

If you could see if this behavior happens to you as well.

Thanks.

[Georgi Tunev]

Hi robertw102,

Yes, we are still working on this - thank you for your patience. The problem should be fixed in the Q3 release next week.



Regards,
Georgi Tunev
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.