CODEWITHSUNDEEP
dojotree
Aru
Aru

Reputation: 167

how to change the icon of leaf node in dojo tree?

I have created a tree containing information about server and its VMs. I want to change the icon of VM to green if the VM is power on or to red if the VM is poweroff. How to achieve this?

Upvotes: 0

Views: 7881

Answers (2)

Rajkamal Subramanian
Rajkamal Subramanian

Reputation: 6944

This might be another way of doing the same thing,

getIconStyle:function(item, opened){
    if(!item.root){
        if(!item.children){
            // Style the nodes that not have childrens
            return {backgroundColor: "red"};
        }else{
            // Style the nodes that have childrens
            return {backgroundColor: "blue"};
        }
    }else{
        // Style the root node here
        return {backgroundColor: "orange"};
    }
}

you can also use getIconClass to return appropriate css class name.

Upvotes: 3

Andy
Andy

Reputation: 414

Create a function to switch the tree node css class depending on if the VM is on or off.

ar iconFunc = dojo.hitch(this, function (item, opened) { 
                if(item !== undefined && item !== null) {
                    if (item.VmOn!== undefined) {
                        return "VmOn";
                    }
                    else {
                        return "VmOff";
                    }
                }
            });

When creating your tree, pass the iconFunc in the constructor params:

var treeParams = {
    getIconClass : iconFunc, //attach the custom icon function
...};
var myTree = new dijit.Tree(treeParams);

Then create css styles called VmOn and VmOff:

.VmOn {
    background: url(path to your image for VmOn) no-repeat;

The store items that make up the tree nodes will need a property of VmOn or VmOff or change the iconFunc to examine the store items in a different way...

Upvotes: 0

Related Questions