Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTreeMap/Node/Methods/ below:

Vue TreeMap - Methods | Vue Documentation

Methods used to control the treemap node.

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 specify any fields of the

or

objects, except the

field. This restriction exists because the layout of tiles and groups is calculated long before any customization can be applied.

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'
                    }
                }
            })
        })
    }
};

When a node is being drilled down/up, its visual representation is converted from tile to group and back. However, the customizations made in that node by the

method remain. If you need to revert the appearance of the node to the initial state, call the node's

method.

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 UI component. 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 UI component 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.

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.

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.

Gets a specific node from a collection of direct descendants.

The index of the desired node in the array of child nodes.

Indicates how many direct descendants the current node has.

The number of direct descendants of the current node. 0 if there are none.

Returns the parent node of the current node.

The parent node of the current node. null if the parent is the root node.

Indicates whether the current node is active.

true if the node belongs to the currently displayed collection of nodes; false otherwise.

In most cases, you can consider that the isActive() method returns true when the node is visible, and false otherwise. However, there is an exception for the nodes with zero value. Such nodes are invisible, yet their isActive() method returns true.

Indicates whether the node is in the hover state or not.

true if the node is in the hover state; false otherwise.

When the user pauses on a group, the group changes its style. The tiles belonging to that group also change their style. However, the isHovered() method of the tiles will return false, although visually they have entered the hover state.

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.

When a node is being drilled down/up, its visual representation is converted from tile to group and back. Thus, the isLeaf() method may return different values for the same node at different stages of the application flow.

Indicates whether the node is selected or not.

true if the node is selected; false otherwise.

Returns the label of the node.

Sets the label to the node.

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.

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.

Sets the selection state of a node.

Pass true to select the node; false to deselect.

If the

property is set to

, calling this method with

as the argument selects one node and deselects all the others.

To deselect all nodes at once, call the clearSelection() method.

Shows the tooltip.

Use this and hideTooltip() methods to change the visibility of the tooltip programmatically.

Gets the raw value of the node.

The raw value of the node.

If the node is a group, this method returns the sum total of values of all nested nodes.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4