Show/hide RadToolBar control - javascript

4 posts, 1 answers
  1. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2012 Link to this post

    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!
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 14 Dec 2012 Link to this post

    Hello Emil,

    If you're using the latest version of the controls the set_visible function should work.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 15 Dec 2012 Link to this post

    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
  5. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 15 Dec 2012 Link to this post

    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.
Back to Top