Customizing a Tree Panel

A Tree panel can be fill in with a single business component or through a series of business components, one for each tree level.

It is possible to link a "Node expanded" event to a tree and use this event to customize the tree content, in terms of:

• which sub-tree nodes are leaves

• icon and by and large CSS formats for nodes

The javascript callback invoked by Platform through the "Node expanded" event has the following signature:

function(comp,record,rowIndex,node) {
}

where

• comp is the Tree Panel component

• record is the current expanded node content (not the node, the data coming from the server, linked to that node)

• rowIndex is the current node index, starting from the root node

• node is the current expanded node

The last object is the most helpful, since it contains methods which can be used for a variety of different usages:

• node.childNodes - a javascript Array containing the nodes retrieved from the server and already added to the current expanded node; you can scroll through them and change some of their properties, if needed; for example the CSS to add to them of whether they are leaves or not

• int getDepth() - the current node depth (starting from 0, the root node) - helpful to figure out which children nodes are leaves

• attribute - contains the record binded to the current node, helpful along with the depth to figure out if the children nodes are leaves

• setLeaf(boolean isLeaf) - used to mark the node as a leaf

• setCls(String css) - a method used to add a CSS class to the node; through it you can for example override the default rendering of the node (size, background, icon, etc.)

• setIconCls(String css) - a method used to define the CSS class used for the icon of the node

• setIcon(String imageName) - a method used to define the icon for the node

Example of "Node expanded" action content, for a node having 3 levels of nodes

if (node.getDepth()==2) { 
    // here I could also include additional conditions
    // in case the tree has different depths, according to the subtree:
    // a good test would be: 
    // && node.attributes["attrNameToTest"]=="MYSPECIFICSUBTREENODEVALUE"...
     
    // all children nodes are leaves: let's mark them as leaves!
    for(var i=0;i<node.childNodes.length;i++) {
        node.childNodes[i].setLeaf(true);
    }
    node.expand();
}