Show/hide RadToolBar control - javascript

[Emil]

Hello,

How can I show/hide the RadToolBar control using client-side javascript?

I've tried:

var toolBar = $find("<%=RadToolBar2.ClientID%>");
toolBar.set_visible(false);

and..

var toolBar = $find("<%=RadToolBar2.ClientID%>");
toolBar.hide;

Doesn't work!

Thank you!

[Kevin]

Hello Emil,

If you're using the latest version of the controls the set_visible function should work.

[Emil]

Thank you Kevin!

I have two RadToolBar controls. I have a on/off button on RadToolBar1 which shows/hides the second toolbar (RadToolBar2).

It only works when the RadToolBar2 starts out as a visible control. When the RadToolBar2 Visible property is set to "False", the on/off button on RadToolBar1 doesn't work anymore.

Why?

Thanks,
Emil

[Kevin]

Hello Emil,

If the Visible property is set to false on the RadToolBar, or any control for that matter, they are not rendered in the browser, thus they don't exist on the client. This is the reason you can't toggle it's visibility because it doesn't exist on the client. I would suggest hiding it on the client using the OnClientLoad event of the first RadToolBar, instead of setting the Visible property of the control. So it could look something like this:

function OnClientLoad(sender, args) {
    var onOffButton = sender.findItemByValue("OnOffButton");

    if (onOffButton.get_value() == "Off") {
        $find("<%=RadToolBar2.ClientID%>").set_visible(false);
    }
}

I'm assuming you might to change this code if you're using a toggle button, but the general logic is there.

I hope that helps.