jQuery UI Widgets Forums Navigation Tree Double click tree node

This topic contains 8 replies, has 3 voices, and was last updated by  MartinWalke 10 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Double click tree node #14921

    MartinWalke
    Member

    Hi,

    How can I hook into the doubleclick event of the tree? I’ve set the toggle mode to ‘click’ and used the following:

    $(“#jqxTree.jqx-tree-item”).dblclick(function (event) {
    var text = event.toElement.innerText;
    alert(text);

    but when I double click a node, it still opens to show the children. I want to show something else in another part of the page.

    TIA
    Martin

    Double click tree node #14970

    Dimitar
    Participant

    Hello Martin,

    Here is an example in which single and double click on a tree item do different things:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>The jqxTree in this demo displays images next to the tree items.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ theme: theme, toggleMode: 'none' });
    // Create jqxExpander
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    function singleClick(event) {
    var _item = event.target;
    if (_item.tagName != "LI") {
    _item = $(_item).parents("li:first");
    };
    var item = $('#jqxTree').jqxTree('getItem', _item[0]);
    if (item.isExpanded == true) {
    $('#jqxTree').jqxTree('collapseItem', _item[0]);
    } else {
    $('#jqxTree').jqxTree('expandItem', _item[0]);
    };
    };
    function doubleClick(event) {
    var text = event.target.textContent;
    var text2 = text.replace(/\s+/g, ' ');
    alert(text2);
    };
    $("#jqxTree .jqx-tree-item").click(function (event) {
    var that = this;
    setTimeout(function () {
    var dblclick = parseInt($(that).data('double'), 10);
    if (dblclick > 0) {
    $(that).data('double', dblclick - 1);
    } else {
    singleClick.call(that, event);
    }
    }, 300);
    }).dblclick(function (event) {
    $(this).data('double', 2);
    doubleClick.call(this, event);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxExpander'>
    <div>
    Folders</div>
    <div id='jqxTree'>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
    item-title="true">Mail</span>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
    item-title="true">Calendar</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
    item-title="true">Contacts</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">jQWidgets</span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Admin</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Corporate</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Finance</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Other</span> </li>
    </ul>
    </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Personal</span> </li>
    </ul>
    </li>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Today</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Week</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Month</span> </li>
    </ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
    item-title="true">Notes</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
    item-title="true">Settings</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
    item-title="true">Favorites</span> </li>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Double click tree node #14977

    MartinWalke
    Member

    Thanks Dimitar.

    I’ll have a look and see if I can use this. I’m not sure what the expander class does, so I’ll need to read up about it. My tree expands without it, so I assumed I didn’t need it. Does it add some ‘hidden’ functionality that’s not clear, or simply not available, in the tree class?

    My code doesn’t use any HTML tags, just creates the tree from from some JSON definitions and uses the dataAdapter.

    Kind regards
    Martin

    Double click tree node #14982

    Dimitar
    Participant

    Hi Martin,

    In this example (a modified version of the Default Functionality demo), the expander serves only as a container to the tree and is not necessary.

    As for the tagName check, it will work even if your tree is loaded from JSON because an internal HTML structure is created when the widget is rendered.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Double click tree node #15021

    MartinWalke
    Member

    Ok – I understand all that.. however… 🙂
    Below is a cut-down version of my code which doesn’t do what I was expecting. It’s probably something really simple but I can’t see it.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Tree</title>
    <meta name="generator" content="TSW WebCoder">
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = 'ui-sunny';
    var data = new Array();
    var xmlNode;
    xmlNode = new Object();
    xmlNode["id"] = "1";
    xmlNode["text"] = "Top Node";
    xmlNode["parentid"] = "-1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "2";
    xmlNode["text"] = "Level 1 Node";
    xmlNode["parentid"] = "1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "3";
    xmlNode["text"] = "Level 1 Node";
    xmlNode["parentid"] = "1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "4";
    xmlNode["text"] = "Level2 Node";
    xmlNode["parentid"] = "2";
    data.push(xmlNode);
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' }
    ],
    id: 'id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
    // specifies the mapping between the 'text' and 'label' fields.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    $('#jqxWidget').jqxTree({
    source: records,
    width: 200,
    theme: theme,
    toggleMode: 'none' });
    function singleClick(event) {
    var _item = event.target;
    if (_item.tagName != "LI") {
    _item = $(_item).parents("li:first");
    };
    var item = $('#jqxTree').jqxTree('getItem', _item[0]);
    if (item.isExpanded == true) {
    $('#jqxTree').jqxTree('collapseItem', _item[0]);
    } else {
    $('#jqxTree').jqxTree('expandItem', _item[0]);
    };
    };
    function doubleClick(event) {
    var text = event.target.textContent;
    var text2 = text.replace(/\s+/g, ' ');
    alert(text2);
    };
    $("#jqxTree .jqx-tree-item").click(function (event) {
    var that = this;
    setTimeout(function () {
    var dblclick = parseInt($(that).data('double'), 10);
    if (dblclick > 0) {
    $(that).data('double', dblclick - 1);
    } else {
    singleClick.call(that, event);
    }
    }, 300);
    }).dblclick(function (event) {
    $(this).data('double', 2);
    doubleClick.call(this, event);
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </body>
    </html>

    BTW, could I use .bind (“click dblclick”, function()) instead of your construct? Or are they the same?

    Thanks for your help in sorting me out Dimitar 😀

    Martin

    Double click tree node #15037

    Dimitar
    Participant

    Hi Martin,

    To fix the code, replace #jqxTree from our solution with the actual id #jqxWidget from your project.

    As for your second question, no, these constructs are not the same because different things are done for click and dblclick.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Double click tree node #15044

    MartinWalke
    Member

    Brilliant!!! Many thanks Dimitar for your patience and help! 😀

    I misunderstood the distinction between jqxWidget div and the jqxTree. Now, looking at it again, it makes perfect sense (of course). Although the only one that was not so clear, is the line

    $("#jqxTree .jqx-tree-item").click(function (event) {

    but I thought, because the .jqx-tree-item class is included in the jqxWidget, it would be reachable but having now looked at the created tree at run time, I can see why it’s not. jqxTree doesn’t actually exist and is only used as a function definition/prototype.

    Double click tree node #15162

    bartsimp
    Member

    My two cents:

    $(document).ready(function () {

    $(‘#treeA’).jqxTree({ height: ‘300px’, width: ‘300px’ }).bind(‘dblclick’, function(evt){
    alert(“Double Click” + evt.target.textContent);
    });
    });

    Double click tree node #15479

    MartinWalke
    Member

    Thanks bartsimp. Although Dimitar implied that it wasn’t possible, I’ve done something similar.

                $("#jqxWidget").bind('dblclick click', function(event) {
    var element = $(this);
    var evtType = event.type;
    switch(evtType) {
    case 'click':
    singleClick (event);
    break;
    case 'dblclick':
    doubleClick (event);
    break;
    default:
    break;
    }
    });

    All sorted now – until the next problem 🙂

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.