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

Update TreeView node when underlying data item changes

6 Answers 777 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Miika
Top achievements
Rank 1
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

Sort by
0
Vladimir Iliev
Telerik team
answered on 09 Nov 2012, 08:58 AM
Hi Miika,

 
Basically your approach to refresh the tree node looks valid. Currently the Text method of the TreeView replaces the HTML inside the k-item element with the passed string, however in the upcoming KendoUI Q3 release (expected to the end of next week)  the Text method will redraw the node using the current treeview template as you expect. 

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
OnaBai
Top achievements
Rank 2
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>
 
    <!-- Kendo UI Web styles-->
    <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
 
    <!-- Kendo UI Web scripts-->
    <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
0
Vladimir Iliev
Telerik team
answered on 16 Nov 2012, 08:41 AM
Hi Miika,

 
Please note that the KendoUI Q3 2012 is already released and you should upgrade to the final version where the Append method is working as expected - updating both the TreeView items and the DataSource.

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Thanos
Top achievements
Rank 1
answered on 16 Nov 2012, 12:23 PM
Hi Vladimir,

About the Append method,it doesn't seem to work on the dataSource.The only case the method updates the dataSource is when I append on a node that already has children!Only then I can see the new child node added in the DS.
I'm using the Q3 release and a remote Observable-Hierarchical-DataSource.

Any hints?Is this to be expected on remote datasource implementations?
0
OnaBai
Top achievements
Rank 2
answered on 19 Nov 2012, 11:14 AM
Vladimir, 

I've tested it with Q3 release and I cannot make it work.
I've uploaded the code for appending nodes (http://jsfiddle.net/OnaBai/UC3uW/). Select a node in the tree and then click on append for adding a child. If you click show, you will see that I'm not getting the DataSource updated. What I am doing wrong?

Regards 
0
Thanos
Top achievements
Rank 1
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);
                       
                    });
                     
                })
                 
            });
Tags
TreeView
Asked by
Miika
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
OnaBai
Top achievements
Rank 2
Thanos
Top achievements
Rank 1
Share this question
or