Search code examples
tfstreeviewazure-devopstfs-2015

VSS Controls TreeView top nodes show icons instead of node name


I followed this how-to for using the VSS control TreeView (on TFS2015.3): https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/ui-controls/treeviewo

But the top nodes are showing strange icons instead of a node name (see picture) result


Solution

  • I didn't see any issue by following the instruction you provide. Following is the content in my html for your reference:

     <!DOCTYPE html>
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>EdControl</title>
         <script src="sdk/scripts/VSS.SDK.js"></script>
     </head>
     <body>
         <h1>EdControl</h1>
         <div id="sample-container"></div>
         <script type="text/javascript">
             VSS.init({
                 // Our extension will explicitly notify the host when we're done loading
                 explicitNotifyLoaded: true,
    
                 // We are using some Team Services APIs, so we will need the module loader to load them in
                 usePlatformScripts: true,
                 usePlatformStyles: true
             });
             VSS.require(["VSS/Controls", "VSS/Controls/TreeView"],
        function (Controls, TreeView) {
    
            var container = $("#sample-container");
    
    
            var source = [
               {
                   name: "Asia", icon: "icon icon-people", children: [
                    { name: "Russia" },
                    { name: "Afghanistan" },
                    { name: "India" },
                    { name: "China" }]
               },
               {
                   name: "Africa", icon: "icon icon-people", children: [
                    { name: "Algeria" },
                    { name: "Botswana" },
                    { name: "Cameroon" }]
               },
               {
                   name: "Europe", icon: "icon icon-people", children: [
                    { name: "Germany" },
                    { name: "Slovenia" },
                    { name: "Belgium" },
                    { name: "Luxembourg" },
                    { name: "Turkey" }
                   ],
                   expanded: true
               }
            ];
    
            // Converts the source to TreeNodes
            function convertToTreeNodes(items) {
                return $.map(items, function (item) {
                    var node = new TreeView.TreeNode(item.name);
                    node.icon = item.icon;
                    node.expanded = item.expanded;
                    if (item.children && item.children.length > 0) {
                        node.addRange(convertToTreeNodes(item.children));
                    }
                    return node;
                });
            }
    
            // Generate TreeView options
            var treeviewOptions = {
                width: 400,
                height: "100%",
                nodes: convertToTreeNodes(source)
            };
    
            // Create the TreeView inside the specified container
            Controls.create(TreeView.TreeView, container, treeviewOptions);
            VSS.notifyLoadSucceeded();
        });
         </script>
     </body>
     </html>