Vue TreeMap Events

This section describes events fired by this widget.

click

Fires when the user clicks a node.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
jQueryEvent	jQuery.Event	Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field.
event	Event (jQuery or EventObject)	The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
node	TreeMap Node	The clicked node; described in the Node section.

Cannot be used in themes.

When implementing a handling function, use the object passed to it as the parameter. Among the fields of this object, you can find the clicked node. To learn about node's members that you can use, refer to the description of the Node object.

To handle this event, attach a handler to it using the on(eventName, eventHandler) method. For example, the handler in the following code selects/deselects the clicked node.

JavaScript

// ...
var selectNode = function (e) {
    e.node.select(!e.node.isSelected());
};

treeMapInstance.on('click', selectNode);

disposing

Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.

drawn

Raised when the widget's rendering has finished.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.

Cannot be used in themes.

drill

Fires when the user drills up or down.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
node	TreeMap Node	The Node object.

Cannot be used in themes.

When implementing a handling function, use the object passed to it as the parameter. Among the fields of this object, you can find the currently displayed node. To learn about node's members that you can use, refer to the description of the Node object.

The drill event can be used to enable/disable other widgets bound to TreeMap. For example, consider that you have a Button. A click on it drills the TreeMap widget one level up from the current node. But when the root node becomes the current, there is nowhere to drill up. In that case, disable the button in the handler of the drill event.

JavaScript

// ...
var disableBackButton = function (e) {
    if (!e.node.getParent()) // checks whether the node has a parent; if it doesn't, it is the root node
        buttonInstance.option('disabled', true);
    else
        buttonInstance.option('disabled', false);
};

treeMapInstance.on('drill', disableBackButton);

Although not provided out-of-the-box, the drill down capability is easy to implement using the API methods. Learn how to do this from the drillDown() method description.

exported

Raised after data from the widget is exported.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.

exporting

Raised before data from the widget is exported.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
fileName	String	The name of the file to which the widget is about to be exported.
cancel	Boolean	Allows you to prevent exporting.
format	String	The resulting file format. One of PNG, PDF, JPEG, SVG and GIF.

fileSaving

Raised before a file with exported data is saved on the user's local storage.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
fileName	String	The name of the file to be saved.
format	String	The format of the file to be saved. Possible Values: 'PNG' \| 'PDF' \| 'JPEG' \| 'SVG' \| 'GIF'
data	BLOB	Exported data as a BLOB.
cancel	Boolean	Allows you to prevent file saving.

hoverChanged

Fires when the hover state of a node has been changed.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
node	TreeMap Node	The node whose hover state has been changed; described in the Node section.

Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the node whose hover state has been changed.

To identify whether the node was hovered over or hovered out, call its isHovered() method. To identify whether the node is a single tile or a group of tiles, call its isLeaf() method. Other accessible fields and methods of a node are described in the Node section.

incidentOccurred

Raised when an error or warning appears in the widget.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
target	any	Information on the occurred incident.

Main article: onIncidentOccurred

initialized

Raised only once, after the widget is initialized.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Main article: onInitialized

nodesInitialized

Fires when all nodes in the widget are initialized.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
root	TreeMap Node	The root node; described in the Node section.

Cannot be used in themes.

Implement a handler for this event to perform certain operations on the node structure. It will be called once - at the beginning of the widget's lifetime.

Within the handler, use the object passed to it as the parameter. Among the fields of this object, you can find the root node. Using the getAllChildren() and getChild(index) of this node, you can access any other node in the widget. To learn about other available members of any node including the root node, refer to the description of the Node object.

nodesRendering

Fires before nodes will be displayed.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
node	TreeMap Node	In most cases, the root node. When drilling down, the node of the highest displayed level. Described in the Node section.

Cannot be used in themes.

Implement a handler for this event to customize nodes before they will be displayed. This handler will be called each time the collection of active nodes is changed.

Within the handler, you can use the object passed to it as the parameter. Among the fields of this object, you can find the currently displayed node. Using the getAllNodes(), getAllChildren(), getChild(index) and getParent() of this node, you can access any other node in the widget. To learn about other available members of any node, refer to the description of the Node object.

optionChanged

Raised after a widget option is changed.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
name	String	The option's short name.
model	Object	The model data. Available only if you use Knockout.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Object	The widget's instance.
fullName	String	The option's full name.
value	any	The option's new value.

selectionChanged

Fires when the selection state of a node has been changed.

Type:

Event

Function parameters:

e:

Object

Information about the event.

Object structure:

Name	Type	Description
component	Object	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
node	TreeMap Node	The node whose selection state has been changed; described in the Node section.

Cannot be used in themes.

When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the node whose selection state has been changed.

To identify whether the node was selected or deselected, call its isSelected() method. To identify whether the node is a single tile or a group of tiles, call its isLeaf() method. Other accessible fields and methods of a node are described in the Node section.

Vue TreeMap Events

See Also

click

See Also

disposing

See Also

drawn

See Also

drill

See Also

exported

See Also

exporting

See Also

fileSaving

See Also

hoverChanged

See Also

incidentOccurred

See Also

initialized

See Also

nodesInitialized

See Also

nodesRendering

See Also

optionChanged

See Also

selectionChanged

See Also