Hiding asp:Panel From ComboBox Changed Event

5 posts, 0 answers
  1. Shawn
    Shawn avatar
    83 posts
    Member since:
    Jan 2009

    Posted 25 Feb 2010 Link to this post

    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?


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Feb 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shawn
    Shawn avatar
    83 posts
    Member since:
    Jan 2009

    Posted 26 Feb 2010 Link to this post

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


  5. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 26 Feb 2010 Link to this post

    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.
  6. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 26 Feb 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017