Methods
Methods used to control the treemap node.
customize(options)
Customizes the node.
Use this method to customize a specific node. Depending on whether the node is a tile or a group, this method accepts either a tile object or a group object.
You can call the customize(options) method at any point of the application flow, for example, when the nodes are being rendered. The following code paints the label of a child node in blue or red depending on the node's value.
var treeMapOptions = { // ... onNodesRendering: function (e) { var children = e.node.getAllChildren(); $.each(children, function(_, node) { node.customize({ label: { font: { color: node.value() > 100 ? 'blue' : 'red' } } }) }) } };
drillDown()
Drills down into the node.
When the data source has several hierarchical levels, you may need to enable the user to navigate between them. The movement from the higher to the lower hierarchical level is called "drilling down". The movement backwards is called "drilling up". Although not provided out-of-the-box, this capability is easy to implement using the drillDown() and drillUp() methods.
Usually, drilling down is performed when the user clicks a group of tiles in the widget. For example, the following code shows the onClick event handler where the drillDown() method is called of the clicked node.
var treeMapOptions = { // ... onClick: function (e) { e.node.drillDown(); } };
To implement drilling up, bind another widget to TreeMap, e.g., Button. When the user clicks the button, the treemap navigates one level up using its drillUp() method. Alternatively, a click on the button may navigate the user straight to the root node using the resetDrillDown() method of the treemap. Note that the following code configures the onClick handler of the button, not of the treemap.
var buttonOptions = { // ... onClick: function (e) { treeMapInstance.drillUp(); // treeMapInstance.resetDrillDown(); } };
When the user drills up or down, the drill event fires. To handle it, implement the onDrill event handler.
getAllChildren()
Returns all nodes nested in the current node.
Nodes nested in the current node. Each member of this array has fields and methods described in the Node section.
This method allows you to obtain only direct descendants of the current node. To get all its descendants, call the getAllNodes() method.
getAllNodes()
Returns all descendant nodes.
Descendant nodes. Each member of this array has fields and methods described in the Node section.
This method allows you to obtain all descendant nodes without tree traversal. If you need to obtain the direct descendants only, use the getAllChildren() method.
getChild(index)
Gets a specific node from a collection of direct descendants.
The specific node.
getChildrenCount()
Indicates how many direct descendants the current node has.
The number of direct descendants of the current node. 0 if there are none.
getParent()
Returns the parent node of the current node.
The parent node of the current node. null if the parent is the root node.
isActive()
Indicates whether the current node is active.
true if the node belongs to the currently displayed collection of nodes; false otherwise.
isHovered()
Indicates whether the node is in the hover state or not.
true if the node is in the hover state; false otherwise.
isLeaf()
Indicates whether the node is visualized by a tile or a group of tiles.
If true, the node is a tile; if false, the node is a group of tiles.
isSelected()
Indicates whether the node is selected or not.
true if the node is selected; false otherwise.
label(label)
Sets the label to the node.
A new label.
Usually, labels are provided by a data source field. To change the label of a specific node, call the label method passing the new text for the label as its parameter.
resetCustomization()
Reverts the appearance of the node to the initial state.
Use this method if you need to revert the initial appearance after customizing it using the customize(options) method.
select(state)
Sets the selection state of a node.
Pass true to select the node; false to deselect.
To deselect all nodes at once, call the clearSelection() method.
showTooltip()
Shows the tooltip.
Use this and hideTooltip() methods to change the visibility of the tooltip programmatically.
value()
Gets the raw value of the node.
The raw value of the node.