Programmatically clicking plus/minus button

[Paul Robertson]

Hello

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");
     item.find(".t-in:first").trigger("click");

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.

Regards

[Paul Robertson]

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");
        $mytarget.trigger("click");

Can anybody help out with this?

Regards

[Paul Robertson]

PS

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:

        $(myspan).trigger("click");
        // OR  
        $myspan.trigger("click");

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.

Regards

[Boyan Dimitrov]

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.

Regards,
Boyan Dimitrov
the Telerik team