This is a migrated thread and some comments may be shown as answers.

Update TreeView node when underlying data item changes

6 Answers 1004 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Miika asked on 06 Nov 2012, 08:24 AM

Good morning,

I have a situation where I would need to update the displayed name of a treeview node after it has been updated to the database in an edit window. I would obviously like to do this without having to do a full refresh of the data. Haven't been able to find a way to do this though. What I have tried so far:

var treeView = $('#koulutuspuu').data('kendoTreeView');
// Get the data item.
var getitem = treeView.dataSource.get('Tehtävä' + $('#tehtavaID').val());
// Change the name
getitem.nimi = $("#otsikko").val();

// The above works in that the data item "nimi" (the display field) is changed, but this change is not reflected in the treeview.

/* Adding the following code will change the entire text of the tree node, throwing away the icon and also the "treeview-template" formatting */
var treeItem = treeView.findByUid(getitem.uid);
treeItem.text($("#otsikko").val());

So what I would need is a refresh function on the tree (or even better on the node itself) that will cause it to redraw according to the treeview-template, and retaining the icon also. Is this possible?

Regards,
Miika

6 Answers, 1 is accepted

answered on 13 Nov 2012, 12:50 PM

Vladimir,

I'm not sure if this is also related with what you are going to solve in Q3 release. But I'm having problems with current beta release with the following code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<title>Tree View bug demo</title>

<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>

<script src="kendo/js/jquery.min.js" type="text/javascript"></script>

<script src="kendo/js/kendo.all.min.js" type="text/javascript"></script>

<script>

var cnt = 0;

$(document).ready(function () {

var data = [

{

"id": cnt++,

"text":"node_" + cnt

}

];

var tree = $("#treeview").kendoTreeView({

dataSource:kendo.observableHierarchy(data)

}).data("kendoTreeView");

$("#push").click(function () {

var pos = tree.dataItem(tree.select());

pos.items.push({id:cnt++, text:"node_" + cnt});

});

$("#append").click(function () {

var pos = tree.select();

tree.append({id:cnt++, text:"node_" + cnt}, pos);

});

$("#show").click(function () {

var data = tree.dataItem(".k-item:first");

$("#content").html(JSON.stringify(data, null, 2));

});

</script>

</head>

<body>

<div><a id="push" href="#">push</a></div>

<div><a id="append" href="#">append</a></div>

<div><a id="show" href="#">show</a></div>

<div id="treeview"></div>

<div id="content"></div>

</body>

</html>

Basically there are three anchors:
1. push: once selected a node in the tree, it uses dataItem to get current data item and pushes one additional node into it (child node).
2. append: once selected a node in the tree, it uses append to introduce one additional node into it (child node).
3. show: shows the data item of the first element of the tree.

The question / problem is:
1. If I use append the tree is update (visually) but the dataItem is not updated.
2. If I use push then dataItem is update but not the tree.
3. If I select a node, then press append and then push, the tree is visually updated and the model too.

It seems that the first time that I introduce a child 'append' updates some internal structure and from there the tree 'observes' the observable hierarchy put if I directly push it then the tree does not observe the observable hierarchy.

Does it make any sense?

Best regards

answered on 19 Nov 2012, 02:10 PM

Hi OnaBai,

I checked your code to see if you have the same problem with me and indeed you do.
If you alter you data to :

var data = [

{

"id": cnt++,

"text": "node_" + cnt,

"items":[{

"id": cnt++,

"text": "node_" + cnt}]},

{

"id": cnt++,

"text": "node_" + cnt}

];

And then you try to append on node_1 then you will see the change on the dataSource.But as I mentioned above we can see the update happening ONLY if we append on a node who ALREADY had children!

If Vladimir or some other admin could tell us what's going on it would help a lot
Thx

PS:In case an Admin needs it for confirmation,here is my code too

$(document).ready(function() {

$.getJSON(someJSON-URL, function (data) {

var treeview = $("#treeview").kendoTreeView({

dragAndDrop: true,

dataSource: kendo.observableHierarchy(data),

dragstart: function (e) {

if (e.sourceNode.childNodes.length > 1) {

e.preventDefault();

}

}).data("kendoTreeView");

$("#removeNode").click(function() {

var selectedNode = treeview.select();

treeview.remove(selectedNode);

});

$("#appendNodeToSelected").click(function() {

var selectedNode = treeview.select();

if (selectedNode.length == 0) {

selectedNode = null;

}

var nodeText=prompt("Please enter desired Node name","Default");

if (nodeText == null) {

return;

}

treeview.append({

text: nodeText

}, selectedNode);

});

})

});

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Update TreeView node when underlying data item changes

6 Answers, 1 is accepted