Update TreeView node when underlying data item changes

7 posts, 0 answers
  1. Miika
    Miika avatar
    28 posts
    Member since:
    Jun 2012

    Posted 06 Nov 2012 Link to this post

    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

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    1320 posts
    Member since:
    Aug 2012

    Posted 09 Nov 2012 Link to this post

    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!

  3. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 13 Nov 2012 Link to this post

    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

  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    1320 posts
    Member since:
    Aug 2012

    Posted 16 Nov 2012 Link to this post

    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!

  5. Thanos
    Thanos avatar
    9 posts
    Member since:
    Nov 2012

    Posted 16 Nov 2012 Link to this post

    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?

  6. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 19 Nov 2012 Link to this post

    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 

  7. Thanos
    Thanos avatar
    9 posts
    Member since:
    Nov 2012

    Posted 19 Nov 2012 Link to this post

    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);
                           
                        });
                         
                    })
                     
                });

Back to Top