Programmatically clicking plus/minus button

4 posts, 0 answers
  1. Paul Robertson
    Paul Robertson avatar
    78 posts
    Member since:
    May 2010

    Posted 13 Dec 2012 Link to this post


    In Javascript, how should I programmatically click the plus or minus button in a node, in order to programmatically raise the nodeexpand event, or the nodecollapse event. Obviously, calling .expand() on the node object does not raise the event. Would it be something similar to this example (which is in another forum post elsewhere, about programmatically selecting a node):

         var item = $(mytreeid).find(".t-input[name='itemValue'][value='5']").closest("div");


    Presumably the second line would be different, in order to click the expand node, but what should it be? I just can't work it out!

    Thanks if you can help with this one.


  2. Paul Robertson
    Paul Robertson avatar
    78 posts
    Member since:
    May 2010

    Posted 14 Dec 2012 Link to this post

    Alternatively, if there is some way of programmatically triggering the NodeExpand event with the correct 'sender' and 'eventArgs' Javascript objects, would that be a suitable workaround. Both of these client-side objects are relatively convoluted, so I am pretty sure that it would not be appropriate to try and generate them manually, it would need to be done through raising the NodeExpand event, to simulate a +/- click exactly.

    Is it the SPAN inside the .rtUL element that is used to render the +/- button? I am currently working on the following basis, but I cannot get it to successfully generate the click event and/or the subsequent NodeExpand event - just ... nothing happens!

            var $mycontainer = $(mynode).closest("ul.rtUL");
            var $mytarget = $mycontainer.children().find("span.rtPlus");

    Can anybody help out with this?

  3. Paul Robertson
    Paul Robertson avatar
    78 posts
    Member since:
    May 2010

    Posted 17 Dec 2012 Link to this post


    With regards to the programmatic click of the Plus '+' button, a bit more work has got me to this stage, but I am still not successful:

            var mynodeelement = mynode.get_element();
            var $myspan = $(mynodeelement).find(".rtPlus").first();
            var myspan = $myspan.get(0);

            // at which stage neither of the following result in a successful click,
            // when they are tried individually (not both present in code at the same time:

            // OR  

    Both the $myspan and myspan objects are correct, with a reference to the <span class="rtPlus"> DOM element at the start of the node in question, for example, this is how the first node of the tree begins, beneath the parent tree div:

    <div id="mytreeid" class="RadTreeView RadTreeView_WebBlue">
        <ul class="rtUL rtLines">
            <li class="rtLI rtFirst">
                <div class="rtTop">
                    <span class="rtSp"></span>
                    <span class="rtPlus"></span>

    Can anybody confirm that this is an appropriate way of getting the NodeExpand event to fire programmatically, or should I be using some form of the raiseEvent function? If it is the second, can anybody provide a relevant example for the NodeExpand event?

    Thanks very much.


  4. Boyan Dimitrov
    Boyan Dimitrov avatar
    1968 posts

    Posted 18 Dec 2012 Link to this post

    Hello Paul,

    I would recommend you to read our help article that gives some additional information about expanding nodes and why programmatic expanding does not fire both client-side and server-side expand events. Please try to use both client-side and server-side approaches for explicitly expanding nodes and right after that place the code that is to be executed in that event.

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