Update all parameters of a TreeView Node.

[Shruthika]

Hi,

I have been using kendo treeview to display Menu.
Below is my tree view
$("#treeview").kendoTreeView({
                template: '# if(item.isOvr) { # <b>#=item.txt#</b># } else { ##=item.txt## }#',
                select: function (e) {
                    if (this.dataItem(e.node) != null) {
                        this.expand(e.node);
                    }
                },
                dataSource: inlineDefault
            });

var inlineDefault = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        cache: false,
                        url: "/menu/GetTree",
                        dataType: "json",
                        data: { 'id': $('#menuId').val(), 'netId': $('#networkId').val(), 'breakcache': new Date().getTime() }
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        children: "Items",
                    }
                }
            });

Each Item have following properties:

var item = {
                id: id,
                actualid: actaulId,
                typ: menutype,
                prnt: parent,
                txt: text,
                isOvr: isOverride
            };

How Can I update all the properties of a single node? 
or refresh all the children from database of particular node.

[Shruthika]

I tired by just $("#treeview").data("kendoTreeView").dataSource.read(); after change is happened to child node and save to database.    - the tree gets updated but the expanded view and selection in lost.

and on databound if try to select the specific child which is edited previously.
var dataItem = $("#treeview").data("kendoTreeView").dataSource.get(nodeId); 
            var node = $("#treeview").data("kendoTreeView").findByUid(dataItem.uid); -- Error: dataitem is undefined. As it was not expanded.
            $("#treeview").data("kendoTreeView").select(node);

HOW TO GET/SELECT CHILD NODES ON DATABOUND or RELOAD.

Note: I have latest version of telerik.

[Daniel]

Hello Shruthika,

You can reload the children of a particular node by calling its dataSource read method instead of the treeview dataSource read method. The node dataSource can be accessed with the children property.

The children nodes will not be available in the dataBound event if they are still not loaded. You could use the expand method to force the node to be expanded and the children loaded again if needed.

Regards,
Daniel
Telerik

[Shruthika]

Hi Daniel,

I tried it earlier but it is not working. It says dataSource is undefined

var foundNode = treeView.findByUid(dataitem.uid);

foundNode.children.dataSource.read(); -- Doesn't work
foundNode[0].children.dataSource.read(); -- Doesn't Work

Also, on Databound If I try to select a node based on id. That code is being executed for each operation like expand, remove node, move node. How restrict to databound code to perform for specific operation, like we do for RequestEnd?

Is there any way to update the id (if possible all properties) along with the text of a node?

[Shruthika]

Hi Daniel,

I would atleast solve some of this problem if I can just update a particular node template and id.

function changeTreeNodetext(nodeId,text) {
var treeView = $("#treeview").data("kendoTreeView");
var dataitem = $("#treeview").data("kendoTreeView").dataSource.get(nodeId);
dataitem.set("txt", text); -- didn't work
dataitem.set("id", newID); -- didn't work

var foundNode = treeView.findByUid(dataitem.uid);
 treeView.text(foundNode,text); -- didn't work

foundNode.template = '# if(item.isOvr) { # <b>#=item.txt#</b># } else { ##=item.txt## }#';
treeView.text(foundNode,foundNode.template); -- didn't work

}

Is there any way to do that?

Regards,
Shruthika

[Daniel]

Hi Shruthika,

The "children" field is actually the dataSource so you should use:

foundNode.children.read()

There isn't a parameter in the dataBound event that could be used to determine what caused the event to be triggered but you could bind a one time handler with the one so that the function is called only after expanding the needed node. You could also use the requestEnd event with a timeout or a flag.

The template is set for the entire TreeView. If needed, you could change it with the setOptions method. As for updating the values - the approach is correct and you should use the set method. Note that the TreeView will redraw the node only if the text field is changed so you should either update the text field after the ID or trigger the change event for the text field. Check this jsBin example.

Regards,
Daniel
Telerik

[Shruthika]

Hi Daniel,

Thank you for your explanation it was clear. But even this throws error

var treeView = $("#treeview").data("kendoTreeView");
var dataitem = $("#treeview").data("kendoTreeView").dataSource.get(nodeId);
var foundNode = treeView.findByUid(dataitem.uid);

foundNode.children.read(); -- TypeError: foundNode.children.read is not a function

When I debug, I see dataite, node and children but it says read is undefined

Yes as you said after I call text I node was redrawn. Hence, some of my problem is solved.

Regarding, databound issue. My goal is to select a specfic node after treeView is completely loaded. ( I am displaying a specific div onSelect of node). But I don't need to have that operation on expand or any other operation( expand, remove, add, move) except on read. Now I had written the code in databound. which is working but on any other opertion it is calling my custom function and updating the division again, which is not needed. 

Regards,
Shruthika

[Daniel]

Hello,

The error would be thrown if the node does not have any children and therefore its children dataSource is not initialized. In order to avoid the error, you could check the hasChildren field before using the read method. If the node does not have any children initially but you wish to make a request then you should set the hasChildren field to true and then use the load method. Check this jsBin example.

Regards,
Daniel
Telerik