Change icon of existing node (KendoUI/AngularJS)

2 posts, 0 answers
  1. Walter
    Walter avatar
    7 posts
    Member since:
    Mar 2015

    Posted 22 Mar 2015 Link to this post

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

        }
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 Mar 2015 Link to this post

    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
     
    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