Adding the child nodes to the Kendo Tree dynamically

2 posts, 0 answers
  1. Surinaidu
    Surinaidu avatar
    1 posts
    Member since:
    Oct 2014

    Posted 30 Oct 2014 Link to this post

    I am newbie to Kendo UI framework. I want to use Kendo_Tree view for my project purpose. Here i want to add some child nodes dynamically when the user tries to expand the tree. So my requirement is like the call to the server happens when the user expands the tree and the data which we got from server should be added to the tree dynamically.
    I have tried the above scenario with some example, it is adding child nodes but the nodes are
    overlapping(display is not following hierarchy). Please let me know how to add child nodes dynamically.
    Please look at the following code:

        <!DOCTYPE html>
        <html>
        <head>
            <base href="http://demos.telerik.com/kendo-ui/treeview/angular">
            <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
            <title></title>
            <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
            <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
            <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
            <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
            <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
            <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
        </head>
        <body>
            <div id="example" ng-app="KendoDemos">
            <div class="demo-section k-content" ng-controller="MyCtrl">
                <div class="box-col">
                    <h4>TreeView</h4>
                    <div kendo-tree-view="tree"
                     k-data-source="treeData"
                     k-template="itemTemplate"
                     k-on-change="selectedItem = dataItem" k-on-expand="onExpand(kendoEvent)"></div>
                </div>
                <div class="box-col" ng-show="selectedItem">
                  <h4>Selected: {{selectedItem.text}}</h4>
                  <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
                  <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
                  <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
                </div>
            </div>
            <style scoped>
                .k-treeview .k-in {
                    padding: 5px;
                }
            </style>
        </div>
        
        <script>
          angular.module("KendoDemos", [ "kendo.directives" ]);
        function MyCtrl($scope) {
          $scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
            { text: "Item 1" },
            { text: "Item 2", items: [
              { text: "SubItem 2.1" },
              { text: "SubItem 2.2" }
            ] },
            { text: "Item 3" }
          ]});
        
          $scope.itemTemplate = "{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>";
        
          $scope.click = function(dataItem) {
            alert(dataItem.text);
          };
        
          function makeItem() {
            var txt = kendo.toString(new Date(), "HH:mm:ss");
            return { text: txt };
          };
       
          $scope.onExpand = function(e) {
          
            if ($('li.k-item ul.k-group').find()) {
        alert("finded");
        $('ul').addClass("no-high");
        }
       
            // can't get this to work by just modifying the data source
            // therefore we're using tree.append instead.
            var dataItem = $scope.tree.dataItem(e.node);
            
            var newItem = makeItem();
            dataItem.items.push(newItem);
            //$scope.tree.append(newItem, $scope.tree.select());
          }
          
          
          $scope.addAfter = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            var newItem = makeItem();
            array.splice(index + 1, 0, newItem);
          };
        
          $scope.addBelow = function() {
            // can't get this to work by just modifying the data source
            // therefore we're using tree.append instead.
            var newItem = makeItem();
            $scope.tree.append(newItem, $scope.tree.select());
          };
        
          $scope.remove = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            array.splice(index, 1);
          };
        
          window.$scope = $scope;
        }
        </script>
        <style scope>
        .no-high {
         height:-1px !important;
         color: red;
        }
        </style>
        </body>
        </html>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Oct 2014 Link to this post

    Hi Surinaidu,

    I am not sure I understand what the problem is. Can you provide step-by-step instructions and explain what is the expected behavior, and what is the actual behavior?

    On a side note, use console.log(...) instead of alert(...), because Javascript alerts can interfere with page event handlers and produce undesired side effects (e.g. in this case - duplicate item adding).

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top