DHTMLX Docs & Samples Explorer

Events Handling

Available Events

The following events are available in dhtmlxTree:

  • Drag-and-Drop Events:
    • onBeforeDrag - occurs when item's dragging starts (the item is selected and the mouse is moving);
    • onDrag - occurs when the item was dragged and dropped on some other item, but before item's moving is processed;
    • onDragIn - occurs when the item is dragged over some target the item can be dropped to;
    • onDrop - occurs when drag-and-drop had already been processed; also occurs when the nodes are moved programmatically;
  • Editing Events:
    • onEdit - occurs on 4 different stages of edit process: before starting of editing (can be canceled), after starting of editing, before editor's closing (can be canceled), after editor's closing;
    • onBeforeCheck - occurs before an item is checked|unchecked;
    • onCheck - occurs immediately after an item in the tree was checked|unchecked;
  • Loading Events:
    • onXLS - occurs when XML parsing starts;
    • onXLE - occurs when XML parsing is over, new items are already available in the tree;
  • Mouse Events:
    • onMouseIn - occurs when the mouse pointer is hovered over an item;
    • onMouseOut - occurs when the mouse pointer is moved out of item's area;
  • Opening Events:
    • onOpenStart - occurs 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 open|close functionality - in that case result of the function will be ignored;
    • onOpenEnd - occurs right when an item in the tree has already become open. Event also raised for “unclosable” nodes and nodes without open/close functionality - in that case result of function will be ignored.
    • onDblClick - occurs right when a tree item was double clicked, but before default onDblClick functionality is processed;
    • onOpenDynamicEnd - occurs when openItemsDynamic() method loads and opens the required hierarchy of items;
  • Right Click Events
    • onRightClick- occurs when the user clicks the right mouse button;
  • Selection Events
    • onClick - occurs when the text part of a tree item was clicked, but after default onClick functionality was processed;
    • onSelect - occurs 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 attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - 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.
Note: the names of the events are case-sensitive.

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

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