RadTextBox visibility issue

5 posts, 1 answers
  1. Dmitri
    Dmitri avatar
    12 posts
    Member since:
    May 2011

    Posted 20 May 2011 Link to this post

    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...
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 20 May 2011 Link to this post

    Hi Dmitre,

    This might be a dumb question, but did you intend to close your "OnClientSelectedIndexChanged" function before the last line of code?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dmitri
    Dmitri avatar
    12 posts
    Member since:
    May 2011

    Posted 20 May 2011 Link to this post

    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
  5. Answer
    Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 20 May 2011 Link to this post

    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"/>


  6. Dmitri
    Dmitri avatar
    12 posts
    Member since:
    May 2011

    Posted 20 May 2011 Link to this post

    Worked like a charm, thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017