DHTMLX Docs & Samples Explorer

### Event handlers

This JavaScript tree example illustrates the ability to assign user-defined functions to different event handlers (e.g. Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect). If you try to change a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected. Confirm box will pop up if user opens or closes a node.
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.

- Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)
- Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)
- node ID will be passed to the function specified as argument for setOpenAction(aFunc)
- node ID will be passed to the function specified as argument for setDblClickAction(aFunc)
Source

    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
    <script  src="../../codebase/dhtmlxcommon.js"></script>
    <script  src="../../codebase/dhtmlxtree.js"></script>

    <table>
        <tr>
            <td>
                <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver; "/>
            </td>
            <td rowspan="2" style="padding-left:25" valign="top">
                <div id="logarea" style="background-color:lightgrey;height:218px;width:400px; padding:3px; overflow:auto;"></div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
        <li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
        <li>Dropped node ID and new parent node ID  will be passed to function specified as argument for setDragFunction(funcObj)</li>
        <li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
        <li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
    <script>function doLog(str) {
        var log = document.getElementById("logarea");
        log.innerHTML = log.innerHTML + str + "<br/>";
        log.scrollTop = log.scrollHeight;
    }
    function tonclick(id) {
        doLog("Item " + tree.getItemText(id) + " was selected");
    };
    function tondblclick(id) {
        doLog("Item " + tree.getItemText(id) + " was doubleclicked");
    };
    function tondrag(id, id2) {
        return confirm("Do you want to move node " + tree.getItemText(id) + " to item " + tree.getItemText(id2) + "?");
    };
    function tonopen(id, mode) {
        return confirm("Do you want to " + (mode > 0 ? "close": "open") + " node " + tree.getItemText(id) + "?");
    };
    function toncheck(id, state) {
        doLog("Item " + tree.getItemText(id) + " was " + ((state) ? "checked": "unchecked"));
    };

    tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);

    tree.setSkin('dhx_skyblue');
    tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
    tree.enableCheckBoxes(1);
    tree.enableDragAndDrop(1);
    tree.setOnOpenHandler(tonopen);
    tree.attachEvent("onOpenEnd", function(nodeId, event) {
        doLog("An id of open item is " + nodeId);
    });
    tree.setOnClickHandler(tonclick);
    tree.setOnCheckHandler(toncheck);
    tree.setOnDblClickHandler(tondblclick);
    tree.setDragHandler(tondrag);
    tree.loadXML("../common/tree3.xml");</script>