Show / hide RadButton from client

10 posts, 1 answers
  1. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 10 Jun 2011 Link to this post

    Hi. How do you show and hide a RadButton from the client side using javascript? Thanks.

    Daniel
  2. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 10 Jun 2011 Link to this post

    Hi Daniel,

    To achieve the desired effect you can use the set_visible() property of the RadButton client-side object.
    Use the following code to hide the button:

    var radButton = $find("<%= ExampleButton.ClientID %>");
    radButton.set_visible(false);

    And to show it use this:

    var radButton = $find("<%= ExampleButton.ClientID %>");
    radButton.set_visible(true);

    Also keep in mind that you must change "ExampleButton" with the id of your button.

    I attached example project for your convenience.

    All the best,
    Slav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 20 Jun 2011 Link to this post

    Thanks Slav that did the trick. Is this in the documentation? I can't seem to find it.

    Daniel
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 21 Jun 2011 Link to this post

    Hi Daniel,

    Currently this property can't be found in the documentation, but in the future it will be added.

    All the best,
    Slav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Bryan Brannon
    Bryan Brannon avatar
    65 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2012 Link to this post

    I am looking (now over a year later) and cannot find it in the documentation.  It seems there are some other things missing from the documentation.  Can you guys publish the full ClientSide Object Model for the RadButton?

    How do I get a reference to the HTML element of a RadButton. I have tried:

    var radButton = $find("<%= ExampleButton.ClientID %>");
    radButton.get_htmlElement();

    But that doesn't seem to work.

    Thanks,

    -Bryan
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 01 Oct 2012 Link to this post

    Hello Bryan,

    Indeed, the inherited method set_visible is not yet included in the client-side API documentation of RadButton because there was a problem in its functionality in the past. Nevertheless, it now works properly so it will be included with the next update of the documentation.

    As for your second question, you should use the get_element() method to reference the HTML element of the button control:
    var radButton = $find("<%= ExampleButton.ClientID %>");
    radButton.get_element();

     
    All the best,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Jon
    Jon avatar
    5 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2013 Link to this post

    One tip for developers. I wanted my button hidden initially, but shown after certain client events. Like many controls, if you declare Visible to be False as follows, the control will not render at all, and cannot be shown by using the example JavaScript code because it will not exist on the page.

    <telerik:RadButton runat="server" ID="myButton"
               Text="My Button"
               Visible="False"/>

    If you do this and you try the following, radButton will be null.

    var radButton = $find("<%= myButton.ClientID %>");

    For my solution, I did not set Visible to False.  Instead I left it visible in the declaration, then hid it in the JavaScript pageLoad event.  Then I was able to show it at a later time using the example JavaScript code.

    function pageLoad()
    {
        $find("<%= myButton.ClientID %>").set_visible(false);
    }


  9. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 08 Aug 2013 Link to this post

    Just saw this thread as I was doing something similar and thought I'd add another option to better hide a button initially and have it shown later (rather than rely on hiding it on page load):

    Just define the button with a style of display: none (which will hide the base button element).

    <telerik:RadButton ID="RadButtonAdd" ClientIDMode="Static" Text="Add" AutoPostBack="false" style="display: none;" runat="server" />

    ... and then when you need to show it the first time, just use jquery to show the element (in my case it has the same id since I am using a static id):

    $("#RadButtonAdd").show();

    Subsequent show / hides can then use the normal set_visible(bool) function:

    $find("RadButtonAdd").set_visible(true);

    Anyway, thought I'd share in case this helps anyone else. I do this often for various rad buttons that I want initially hidden (but still rendered). 

    -Brian
  10. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 12 May in reply to Brian Azzi Link to this post

    Thanks a lot Brian. I have been struggling with this issue for some time and you solution is the only one that worked properly
  11. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 12 May in reply to Mickael Link to this post

    Awesome! I always find it interesting how even old posts can still be very helpful (and the original post here is pretty old!). ;)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017