RadTextBox visibility issue

[Dmitri]

I am using the ASP.net version of the rad controls (RadControls for ASP.NET AJAX Q1 2011 SP1). I have a RadComboBox that, when the value is set to Other, should display a RadTextBox for data entry, here is the definition and JavaScript i am using:

<telerik:RadComboBox runat="server" ID="rcbIndustry" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" Skin="Black" Width="269" EnableEmbeddedSkins="false" />
<span id="tmp"></span>
<telerik:RadTextBox runat="server" ID="rtbIndustryOther" Skin="Black" Width="250" EnableEmbeddedSkins="false" />
<script>
    function OnClientSelectedIndexChanged(sender, eventArgs) {
        if (eventArgs.get_item().get_value() == 'Other') {
            $find("#<%= rtbIndustryOther.ClientID %>").set_visible(true);
            $("#tmp").html('<br>');
        }
        else {
            $("#<%= rtbIndustryOther.ClientID %>").set_visible(false);
            $("#tmp").html('');
        }
    }
    $find("#<%= rtbIndustryOther.ClientID %>").set_visible(false);
</script>

The last line in the script ($find("#<%= rtbIndustryOther.ClientID %>").set_visible(false);) immediately throws an error:
 "Microsoft JScript runtime error: Unable to get value of the property 'set_visible': object is null or undefined"

What am I doing wrong as this is driving me nuts...

[Gimmik]

Hi Dmitre,

This might be a dumb question, but did you intend to close your "OnClientSelectedIndexChanged" function before the last line of code?

[Dmitri]

Yeah, I wasn't sure what telerik defines as "hidden" (if they use visibility, display, etc...) so that is meant to make the textbox invisible on page load

[Gimmik]

Hi Dmitre,

I see what you're trying to do. I don't think javascript works that way. You'll need to put that line of code into a function. I wired up the ClientEvents-OnLoad client-side event to the rtbIndustryOther_OnLoad function below. You need to load the control to the page before you hide it so that you'll have a handle to make it visible later. You also weren't using the $find command correctly - so I fixed that too. This should be enough to get you started. Let me know how it works out.

-Gimmik

Here's the javascript I used.

function rtbIndustryOther_OnLoad(sender) {
    sender.set_visible(false);
}

function OnClientSelectedIndexChanged(sender, eventArgs) {
    if (eventArgs.get_item().get_value() == 'Other') {
        $find("<%= rtbIndustryOther.ClientID %>").set_value("Enter Other Item");
        $find("<%= rtbIndustryOther.ClientID %>").set_visible(true);
    }
    else {
        $find("<%= rtbIndustryOther.ClientID %>").set_visible(false);
    }
}

and the ASPX

<telerik:RadComboBox runat="server" ID="rcbIndustry" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" Skin="Black" Width="269" EnableEmbeddedSkins="false" AutoPostBack="false">
<Items>
<telerik:RadComboBoxItem Text="Starting" Value="Starting" />
<telerik:RadComboBoxItem Text="Other" Value="Other" />
</Items>
</telerik:RadComboBox>

<telerik:RadTextBox runat="server" ID="rtbIndustryOther" Skin="Black" Width="250" EnableEmbeddedSkins="false" Text="Starting Text" ClientEvents-OnLoad="rtbIndustryOther_OnLoad"/>

[Dmitri]

Worked like a charm, thanks!