Set visibility client side?

[PJ Melies]

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?

[Shinu]

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.

[Jason]

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

[Wired_Nerve]

[Donald Duck]

:)

[Justin]

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?

[Marin Bratanov]

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

[Shubham]

What if need to get it visible only when select the first value in drop down and visible false on second.

[Marin Bratanov]

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