Skip to main content

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();
\}