Question

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?

Answer 1

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…