Change icon of existing node (KendoUI/AngularJS)

[Walter]

In the code below, if you select a tree node and click the button, you'll see that the node text changes however the node icon stays the same (see method $scope.changeNode) . How to change the icon?

You can see a working example in this link.


HTML:
      <div kendo-tree-view="tree" k-data-source="treeData" k-options="treeOptions"></div>
      <button ng-click="changeNode()">Change selected node</button>

CSS:
          .k-treeview .k-sprite {
            background-image: url("http://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
          }
          .rootfolder { background-position: 0 0; }
          .folder { background-position: 0 -16px; }
          .pdf { background-position: 0 -32px; }
          .html { background-position: 0 -48px; }
          .image { background-position: 0 -64px; }
         


Javascript:

    angular.module("KendoDemos", [ "kendo.directives" ]);
    
    function MyCtrl($scope) {
      
      $scope.changeNode = function() {
            var node = $scope.tree.select();
            $scope.tree.dataItem(node).set('text', "New Text");
            $scope.tree.dataItem(node).set('icon', "html");
      };
          
          
      $scope.treeData = new kendo.data.HierarchicalDataSource({
                data: [
                    { text: "Folder 1", icon: "folder", items: [
                        { text: "Doc 1", icon: "pdf" },
                        { text: "Doc 2", icon: "pdf" },
                        { text: "Doc 3", icon: "pdf" }
                    ] },
                    { text: "Folder 2", icon: "folder", items: [
                        { text: "Doc 3", icon: "pdf" },
                        { text: "Doc 4", icon: "pdf" },
                        { text: "Doc 5", icon: "pdf" }
                    ] }
                ]
            });
 

      $scope.treeOptions = {
              dataSpriteCssClassField: "icon"
      };

    }

[Daniel]

Hello,

With the version used in the example, only changing the text will automatically update the item. You could either use the latest official release or switch the order in which the text and the icon are set:

$scope.tree.dataItem(node).set('icon', "html");
$scope.tree.dataItem(node).set('text', "New Text");

in order to update the icon.

Regards,
Daniel
Telerik