Kendo TreeView default selected node doesn't trigger onSelect

Question

My php code creates a hierarchical json dataset for the hierarchicalDataSource used by a treeview.

In this php generating function, i set the very first leaf as selected=true... so when the treeview appears, the first leaf is automatically selected.

The problem is that when the user clicks any leaf, an event (onSelect) is triggered but it is not triggered for this automatic selection of the very first node that occurs when the treeview appears at UI creation time.

How can i fix this ?

UPDATE: Made a Demo: http://jsbin.com/abapid/2/edit

Answer 1

For the benefits of others.... and thanks to OnaBai !... Here is the solution !

Kendo UI lacks many basic features other UI SDK always provide. One of them is an "onDisplay" kind of even that gets triggered once the widget gets painted. This would allow the application to react to specific case like in mine where the dataSource loaded a node containing a "selected = true" field.

The Kendo TreeView reacts by showing the node as selected but in most real world scenarios, the application would also need to react. That is why it would need to be called upon widget initialization to check if a node is selected and react accordingly.

The only hack we (OnaBai) found is to use the "DataBound" event as an "onDisplay" kind of event. The hic is that this event is fired each time a parent node as a child that got modified somehow. So it is called multiple times.

So here is the code to go around this limitation! http://jsbin.com/ejabul/4/edit (Note that you must click the "Run with JS" to simulate a page reload)

 $("#treeview").kendoTreeView({
    dataSource:data,
    dataTextField: "text",
    select: onSelect,
    dataBound: function (e) {
    var uid = undefined;
    var now = this.select();
    if (now) {
        var data = this.dataItem(now);
        uid = data.uid;
        if (uid && uid !== this.old_selected) {
            alert("Bingo !");
        }
        console.log("data", data.uid);
    }
    this.old_selected = uid;
    }
}); 

Explanation by OnaBai

1. Store in uid the Unique ID of the selected item. This ID is introduced by Kendo UI for most node, items, … that it creates. Initially I set it to undefined (just in case there is nothing selected)
2. "now" contains current selected node (if any).
3. If there is an element selected (now !== undefined) then I get the data item for the selected node and then get the UID for this node.
4. If there is a UID and if different than the UID of the previous selected node (that I store in a field that I just extended in the tree_view and I called old_selected) then I alert.
5. finally I save the UID of the selected node for the next time.

Basically what I try is to control that I do not alert two consecutive times for the same node and for controlling it I save the UID of the selected node from one iteration to the next.

Answer 2

If you want to programmatically trigger a select event, you should do:

$("#treeview").data("kendoTreeView").trigger("select");