Handling Events

Available Events

The following events are available in dhtmlxTree:

Drag-and-Drop Events:

• onBeforeDrag - fires when an item's dragging starts (the item is selected and the mouse is moving);
• onDrag - fires when an item was dragged and dropped on some other item, but before item's moving is processed;
• onDragIn - fires when an item is dragged over some target the item can be dropped to;
• onDrop - fires when drag-and-drop had already been processed; also fires when the nodes are moved programmatically;

Editing Events:

• onEdit - fires on 4 different stages of editing process: before starting of editing (can be canceled), after starting of editing, before editor's closing (can be canceled), after editor's closing;
• onBeforeCheck - fires before an item is checked/unchecked;
• onCheck - fires immediately after an item in the tree has been checked/unchecked;

Loading Events:

• onXLS - fires when XML parsing starts;
• onXLE - fires when XML parsing is over, new items are already available in the tree;

Mouse Events:

• onMouseIn - fires when the mouse pointer is hovered over an item;
• onMouseOut - fires when the mouse pointer is moved out of an item's area;

Opening Events:

• onOpenStart - fires right when an item in the tree starts to open, but before this item opens. This event is also available for "unclosable" nodes and nodes without the open/close functionality. In this case the result of the function will be ignored;
• onOpenEnd - fires right when an item in the tree has become open. The event is also raised for "unclosable" nodes and nodes without the open/close functionality. In this case the result of function will be ignored.
• onDblClick - fires right when a tree item has been double clicked, but before the default onDblClick functionality is processed;
• onOpenDynamicEnd - fires when the openItemsDynamic() method loads and opens the required hierarchy of items;

Right Click Events

• onRightClick- fires when the user clicks the right mouse button;
• onBeforeContextMenu - fires before the moment a context menu appears by a right mouse click;

Selection Events

• onClick - fires when the text part of a tree item was clicked, but after the default onClick functionality has been processed;
• onSelect - fires when the selection in the tree was changed.

Attaching/Removing Event Handlers

The user can add any user-defined handler to available events. To do this he can use the attachEvent() method with the following parameters:

• evName - name of the event;
• evHandler - a user-defined event handler.

tree.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

There is a simple way of removing an event-handler:

tree.detachEvent(id); // unique id of the event handler

Related sample:  Event handlers

Back to top