This is a migrated thread and some comments may be shown as answers.
Show / hide RadButton from client
9 Answers 426 Views
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 10 Jun 2011, 07:06 AM
Hi. How do you show and hide a RadButton from the client side using javascript? Thanks.

Daniel

9 Answers, 1 is accepted

Sort by
0
Accepted
Slav
Telerik team
answered on 10 Jun 2011, 09:49 AM
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.

0
Daniel
Top achievements
Rank 1
answered on 21 Jun 2011, 12:58 AM
Thanks Slav that did the trick. Is this in the documentation? I can't seem to find it.

Daniel
0
Slav
Telerik team
answered on 21 Jun 2011, 10:39 AM
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.

0
Bryan Brannon
Top achievements
Rank 2
answered on 27 Sep 2012, 02:55 PM
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
0
Slav
Telerik team
answered on 01 Oct 2012, 11:07 AM
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.
0
Jon
Top achievements
Rank 1
answered on 24 Apr 2013, 04:55 PM
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);
}


0
Brian Azzi
Top achievements
Rank 2
answered on 08 Aug 2013, 11:13 PM
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
0
Mickael
Top achievements
Rank 1
answered on 12 May 2016, 01:06 PM
Thanks a lot Brian. I have been struggling with this issue for some time and you solution is the only one that worked properly
0
Brian Azzi
Top achievements
Rank 2
answered on 12 May 2016, 05:00 PM
Awesome! I always find it interesting how even old posts can still be very helpful (and the original post here is pretty old!). ;)
Asked by
Daniel
Top achievements
Rank 1
Answers by
Slav
Telerik team
Daniel
Top achievements
Rank 1
Bryan Brannon
Top achievements
Rank 2
Jon
Top achievements
Rank 1
Brian Azzi
Top achievements
Rank 2
Mickael
Top achievements
Rank 1
Share this question
or