This is a migrated thread and some comments may be shown as answers.

Set visibility client side?

8 Answers 340 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
PJ Melies
Top achievements
Rank 1
PJ Melies asked on 07 Apr 2009, 11:13 PM
I have a scenario which is similar to the Related Combobox demo (the value of one combo box triggers the population of the second combobox).  However, my requirements dictate that the second combobox not be visible until the user selects an item in the first combo box.  When I set the Visibility=false of the second combo box I get an error on the client side because the $find() method returns null when trying to find the second combobox.  After reviewing the source it appears that the second combobox isn't rendered.

Is there a way to hide the second combobox without setting Visible=false on the server so that the object can be retrieved on the client?

8 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 08 Apr 2009, 06:04 AM
Hi P J Melies,

One suggestion is setting the visibility of second RadComboBox to false inside the pageLoad() function instead of setting it from server. Try the client side code shown below.

[ASPX]
 
<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
<Items> 
    <telerik:RadComboBoxItem Text=" item1" /> 
    <telerik:RadComboBoxItem Text=" item2" /> 
</Items> 
</telerik:RadComboBox> 
 
<telerik:RadComboBox ID="RadComboBox2" runat="server"
</telerik:RadComboBox> 

[CS]
 
<script type="text/javascript"
function pageLoad() 
    var combo = $find("<%= RadComboBox2.ClientID %>"); 
    combo.set_visible(false); // Hide the Combo when page loads 
function OnClientSelectedIndexChanged() 
    var combo = $find("<%= RadComboBox2.ClientID %>"); 
    combo.set_visible(true); 
</script> 
Hope this suits your need.

Thanks,
Shinu.
0
Jason
Top achievements
Rank 2
answered on 15 Dec 2009, 03:02 AM
Thanks Shinu.  I just spend 2 hours with the same problem, your post got me straight!  Thank you PJ for taking the time to post it in the first place also.

Adisa
0
Wired_Nerve
Top achievements
Rank 2
answered on 28 Feb 2013, 06:41 PM

0
Donald Duck
Top achievements
Rank 1
answered on 01 Mar 2013, 12:37 PM
:)
0
Justin
Top achievements
Rank 1
answered on 19 Dec 2018, 02:52 PM
when ever i do this the drop down disappears after I add items using java script. I already have my autopostback set to false on the drop down. Is there another way to hide the drop down the show when i need to populate it?
0
Marin Bratanov
Telerik team
answered on 23 Dec 2018, 10:22 AM
Hello Justin,

You could toggle the display CSS property of its container between "none" and an empty string.

The following works fine for me, though:

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem Text=" item1" />
        <telerik:RadComboBoxItem Text=" item2" />
    </Items>
</telerik:RadComboBox>
 
<telerik:RadComboBox ID="RadComboBox2" runat="server">
</telerik:RadComboBox>
 
<script type="text/javascript">
    function pageLoad() {
        var combo = $find("<%= RadComboBox2.ClientID %>");
        combo.set_visible(false); // Hide the Combo when page loads
    }
    function OnClientSelectedIndexChanged() {
        var combo = $find("<%= RadComboBox2.ClientID %>");
        combo.set_visible(true);
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text("New Item");
        combo.trackChanges();
        combo.get_items().add(comboItem);
        comboItem.select();
        combo.commitChanges();
    }
</script>

So if it doesn't work for you or your case is different, can you modify this sample to showcase the issue? Also, can you confirm you are using the latest version of the UI for ASP.NET AJAX controls?

Also, if you are looking to populate a combo box on demand, it offers such features out of the box: https://demos.telerik.com/aspnet-ajax/combobox/examples/populatingwithdata/autocompletesql/defaultcs.aspx. You can trigger loading of items through its client-side API as well, see the .requestItems(text, shouldAppend) method and Example 4: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/client-side-programming/objects/radcombobox-object.


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Shubham
Top achievements
Rank 1
answered on 19 Feb 2019, 07:56 AM
What if need to get it visible only when select the first value in drop down and visible false on second.
0
Marin Bratanov
Telerik team
answered on 20 Feb 2019, 02:23 PM
Hi Shubham,

Then you will need to write some logic in the OnClientSelectedIndexChanged handler that determines whether to hide or not the other control.


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
PJ Melies
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Jason
Top achievements
Rank 2
Wired_Nerve
Top achievements
Rank 2
Donald Duck
Top achievements
Rank 1
Justin
Top achievements
Rank 1
Marin Bratanov
Telerik team
Shubham
Top achievements
Rank 1
Share this question
or