Double click tree node - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: click, dblclick, double-click, item, jqxtree, node, Tree

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

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

Author

Double click tree node Posts

February 8, 2013 at 5:34 pm 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

February 11, 2013 at 7:22 am 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/

February 11, 2013 at 10:03 am 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

February 11, 2013 at 10:34 am 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/

February 11, 2013 at 4:11 pm 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

February 12, 2013 at 6:31 am 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/

February 12, 2013 at 9:48 am 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.

February 13, 2013 at 2:33 pm 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);
});
});

February 19, 2013 at 3:12 pm 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 🙂

Author

Posts

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

You must be logged in to reply to this topic.