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

3 posts, 0 answers
  1. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 29 Mar 2013 Link to this post

    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;
    }
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 03 Apr 2013 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 03 Apr 2013 Link to this post

    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.  :)
Back to Top