[Solved] Hiding asp:Panel From ComboBox Changed Event

[Shawn]

I am not sure how to fine tune this, but it seems to me like it should be rather simple.  I have a RadComboBox on my page that only has two possible values:

<telerik:RadComboBox ID="list_ApplicationType" Runat="server" Skin="Windows7"
                        Width="170px" OnClientSelectedIndexChanged="AppTypeChanged">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Selected="True" Text="Individual"
                                Value="Individual" />
                            <telerik:RadComboBoxItem runat="server" Text="Joint" Value="Joint" />
                        </Items>
                    </telerik:RadComboBox>

When the user changes it to "Joint" I want the asp panel named 'CoApplicant' to become visible.  If changed back, then hide again.  Here is my javascript code which is not working:
When the user changes it to "Joint" I want the asp panel named 'CoApplicant' to become visible.  If changed back, then hide again.  Here is my javascript code which is not working:

<script language="javascript" type="text/javascript">
                <!--

             function AppTypeChanged(sender, eventArgs) {
                 var item = eventArgs.get_item();

                 if (item.get_value() == "Joint") {
                        ($find("panel_CoApplicant")).visible = true;
                        //(document.getElementById("panel_CoApplicant")).visible = false;
                    }
                 else {
                        (document.getElementById("panel_CoApplicant")).visible = false;
                    }

                }

                // -->
            </script>

How do I hide that panel based on the selection?

[Shinu]

Hello Shown,

You could set the style.display property of the panel's client object for changing the visibility from client side.

Javacript:

    function AppTypeChanged(sender, eventArgs) {
        var item = eventArgs.get_item();
        if (item.get_value() == "Joint") {
            document.getElementById("panel_CoApplicant").style.display = "none";
        }
        else {
            document.getElementById("panel_CoApplicant").style.display = "block";
        }
    }

-Shinu.

[Shawn]

That doesn't work - I get an "object required" javascript error when I attempt to execute that.

[robertw102]

Is the panel control you are trying to show even rendered on the page. I mean, does your panel definition contain Visible="false" or is it being hidden on the client-side? If it's the first, then you can't show it on the client-side since it doesn't exist on the client-side because it was never rendered.

If it's being hidden using a css rule, then maybe you should change the "panel_CoApplicant" in your javascript to "<%=panel_CoApplicant.ClientID%>" to get the correct client-side id.

I hope that helps.

[robertw102]

Also, you can't use the $find keyword on non-ajax controls, which the asp:Panel is not. It needs to be document.getElementById or $get (the jQuery version of document.getElementById). Also, you don't need to enclose you document.getElementById lines in brackets to access the element's properties.