Show / hide RadButton from client

[Daniel]

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

Daniel

[Slav]

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

[Daniel]

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

Daniel

[Slav]

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

[Bryan Brannon]

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

[Slav]

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

[Jon]

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);
}

[Brian Azzi]

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

[Software]

I set my RadButton to not show using the style="display:none;" as you had suggested.

<telerik:RadButton ID="RadButton1" Text="Use Selected Patient" runat="server" Height="30" Font-Bold="true" Skin="Office2007" style="display:none;" OnClientClicked="ProcessingButtonClick" OnClick="RadButton1_OnClick">
        <Icon SecondaryIconCssClass="rbNext" SecondaryIconRight="6" SecondaryIconTop="10"></Icon>
</telerik:RadButton>

Then when the user clicks a row in my RadGrid, I want to show the button, so in the OnRowSelected event, I have

function cellPatientSelected(sender, args) {     

          var btn = $find("<%=RadButton1.ClientID%>");
                btn.show();

}

and I get this error

Uncaught TypeError: btn.show is not a function

[Rumen]

The issue you're encountering is due to the show method not being a function of the RadRadButton control. The show and hide methods are typically associated with jQuery objects, but the $find MS AJAX method a reference to the RadButton client-side object, not a jQuery object.

To resolve this issue, you should manipulate the display style of the HTML element associated with the RadButton. Since you've initially set the button to be hidden using inline CSS (style="display:none;"), you need to change the style.display property to make it visible again.

Here's how you can modify your JavaScript function:

function cellPatientSelected(sender, args) {
    var btn = $find("<%= RadButton1.ClientID %>");
    if(btn) {
        // Access the HTML DOM element of the RadButton and change its display style
        var btnElement = btn.get_element();
        btnElement.style.display = ''; // This will reset the display property, showing the button
    }
}

[Mickael]

Thanks a lot Brian. I have been struggling with this issue for some time and you solution is the only one that worked properly

[Brian Azzi]

Awesome! I always find it interesting how even old posts can still be very helpful (and the original post here is pretty old!). ;)