FormDecorator doesn't style controls inside hidden container after javascript shows the container

[J]

I have a form with a checkbox and a table, the table has several rows, each with a label and text box and 1 row has a dropdown list.  The table is hidden using 'style="display:none;"' on page load and the checkbox is checked.

When I uncheck the checkbox, a javascript function is called to change the display mode of the table to 'style="display:block;"' and it works just fine, EXCEPT, the dropdown list does not get styled by the FormDecorator.  If change it so that the table is visible on load, it gets styled normally.

The only way to get around this was to change my checkbox to call server side code on a postback to show/hide the table instead of javascript.  But I hate performing a postback and executing code server side for something that can be handled client side.

Changing "OnClick='ShowHideShipping()'" to "OnCheckedChanged='chkShippingInfo_CheckedChanged' AutoPostBack='true'" gets me around the issue but why should I do a server side postback for something that only affects the client?

Anyone else run into this?  Any ideas?

The markup:

<asp:CheckBox runat="server" ID="chkShippingInfo" Text="  Use my billing address (below)"  Checked="true" OnClick="ShowHideShipping()" />
<table id="tblShippingInfo" class="AddressInfoTable" runat="server" style="display: none;">
    <tr class="xmp-form-row">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_Name">
                <span class="red"> * </span>Name: </label>
        </td>
        <td align="left">
            <telerik:RadTextBox ID="txtShipTo_Name" runat="server"   />
        </td>
        <td align="left">
            <asp:RequiredFieldValidator ID="valRequired_ShipTo_Name" runat="server"
                Text="  * Required" Display="Dynamic" Enabled="false"
                ErrorMessage="The Ship To Name field is required." Font-Bold="True"
                ForeColor="Red" ControlToValidate="txtShipTo_Name"   />
        </td>
    </tr>
    <tr class="xmp-form-row">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_Address">
                <span class="red"> * </span>Address: </label>
        </td>
        <td align="left">
            <telerik:RadTextBox ID="txtShipTo_Address" runat="server"   />
        </td>
        <td align="left">
            <asp:RequiredFieldValidator ID="valRequired_ShipTo_Address" runat="server"
                Text ="  * Required" Display="Dynamic" Enabled="false"
                ErrorMessage="The Ship To Address field is required." Font-Bold="True"
                ForeColor="Red" ControlToValidate="txtShipTo_Address"   />
        </td>
    </tr>
    <tr class="xmp-form-row">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_City">
                <span class="red"> * </span>City: </label>
        </td>
        <td align="left">
            <telerik:RadTextBox ID="txtShipTo_City" runat="server"   />
        </td>
        <td align="left">
            <asp:RequiredFieldValidator ID="valRequired_ShipTo_City" runat="server" Display="Dynamic"
                Text ="  * Required" ErrorMessage="The Ship To City is required."
                Font-Bold="True" ForeColor="Red" ControlToValidate="txtShipTo_City" Enabled="false" />
        </td>
    </tr>
    <tr class="xmp-form-row" style="display: none;">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_Country">
                <span class="red"> * </span>Country: </label>
        </td>
        <td align="left">
            <asp:DropDownList ID="cmbShipTo_Country" runat="server" AutoPostBack="True" Width="160px" onselectedindexchanged="cmbShipTo_Country_SelectedIndexChanged">
                <asp:ListItem Text="US" Value="US" />
                <asp:ListItem Text="Other" Value="Other" />
            </asp:DropDownList>
        </td>
        <td align="left">
        </td>
    </tr>
    <tr class="xmp-form-row">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_State">
                <span class="red"> * </span>State/Prov.: </label>
        </td>
        <td align="left">
            <asp:DropDownList ID="cmbShipTo_State" runat="server" AutoPostBack="false" Width="160px" />
        </td>
        <td align="left">
            <asp:RequiredFieldValidator ID="valRequired_ShipTo_State" runat="server"
                Text ="  * Required" Display="Dynamic" Enabled="false"
                ErrorMessage="The Ship To State field is required." Font-Bold="True"
                ForeColor="Red" ControlToValidate="cmbShipTo_State"   />
        </td>
    </tr>
    <tr class="xmp-form-row">
        <td align="right" class="xmp-form-label-cell">
            <label class="xmp-form-label" id="lblShipTo_ZipCode">
                <span class="red"> * </span>Zip Code: </label>
        </td>
        <td align="left">
            <telerik:RadMaskedTextBox ID="txtShipTo_ZipCode" runat="server" Mask="#####" PromptChar="_" HideOnBlur="True" RequireCompleteText="True" ResetCaretOnFocus="True" />
        </td>
        <td align="left">
            <asp:RequiredFieldValidator ID="valRequired_ShipTo_Zip" runat="server"
                Text ="  * Required" Display="Dynamic" Enabled="false"
                ErrorMessage="The Ship To Zip Code field is required." Font-Bold="True"
                ForeColor="Red" ControlToValidate="txtShipTo_ZipCode"   />
        </td>
    </tr>
</table>

The javascript being used to show/hide the table:

var sShippingCheckBoxID = "<%=chkShippingInfo.ClientID %>";

var valShipNameID = "<%=valRequired_ShipTo_Name.ClientID %>";

var valShipAddressID = "<%=valRequired_ShipTo_Address.ClientID %>";

var valShipCityID = "<%=valRequired_ShipTo_City.ClientID %>";

var valShipStateID = "<%=valRequired_ShipTo_State.ClientID %>";

var valShipZipID = "<%=valRequired_ShipTo_Zip.ClientID %>";

var sShippingTableID = "<%=tblShippingInfo.ClientID %>";

  

/// <summary>

/// Hides/shows the shipping information area.

/// </summary>

function ShowHideShipping() {

    var tblShip = document.getElementById(sShippingTableID);

    var chkShip = document.getElementById(sShippingCheckBoxID);

    var valShipName = document.getElementById(valShipNameID);

    var valShipAddress = document.getElementById(valShipAddressID);

    var valShipCity = document.getElementById(valShipCityID);

    var valShipState = document.getElementById(valShipStateID);

    var valShipZip = document.getElementById(valShipZipID);

  

    var bShowShipping = false;

  

    if (chkShip != null)

        bShowShipping = !chkShip.checked;

  

     if (tblShip != null)
     {
     if (bShowShipping)

            tblShip.style.display = "block";
  else
tblShip.style.display = "none";


    }

  

    if (valShipName != null)

        valShipName.Enabled = bShowShipping;

  

    if (valShipAddress != null)

        valShipAddress.Enabled = bShowShipping;

  

    if (valShipCity != null)

        valShipCity.Enabled = bShowShipping;

  

    if (valShipState != null)

        valShipState.Enabled = bShowShipping;

  

    if (valShipZip != null)

        valShipZip.Enabled = bShowShipping;

}

The "fix" - use post back instead of javascript:

protected void chkShippingInfo_CheckedChanged(object sender, EventArgs e)
{
    tblShippingInfo.Style["display"] = (chkShippingInfo.Checked ? "none" : "block");

    valRequired_ShipTo_Name.Enabled = !chkShippingInfo.Checked;
    valRequired_ShipTo_Address.Enabled = !chkShippingInfo.Checked;
    valRequired_ShipTo_City.Enabled = !chkShippingInfo.Checked;
    valRequired_ShipTo_State.Enabled = !chkShippingInfo.Checked;
    valRequired_ShipTo_Zip.Enabled = !chkShippingInfo.Checked;
}

[Danail Vasilev]

Hello Juan,

What actually the RadFormDecorator does is to cascade through the HTML elements and set them with the appropriate classes which in turn decorate these elements. However, there are elements that require entirely new structure in order to be styled (e.g. ASP DropDownList, Select, etc.).

In that case the RadFormDecorator just hide them by setting styles like left: -99999px; position: fixed; top: 0; and then create new styled elements on their place. Due to the specifics in decoration of these elements they are prevented from decoration when their wrapper is invisible.

In that case you can simply invoke the client-side decorate() method of RadFormDecorator in the function that enables the visibility of the wrapper. For example:

        <script type="text/javascript">
            function ShowHideShipping() {
                var tblShip = document.getElementById(sShippingTableID);
                var chkShip = document.getElementById(sShippingCheckBoxID);
...
                var rfd1 = $find('<%=RadFormDecorator1.ClientID %>');
                rfd1.decorate();
            }
        </script>

Kind regards,
Danail Vasilev
the Telerik team

[J]

Yeah, I ended up finding a post about that method.  But, instead what I did was change out the ASP DropDownList for a RadDropDownList and set it's skin to match the rest of the page.

Thanks for your help.  :)