jQuery Tree with Context Menu

In this post, we will Add and Remove Tree Items by using a Context Menu. When the user right clicks on a Tree Item, a Context Menu with ‘Add Item’ and ‘Remove Item’ menu items will be displayed. The ‘Add Item’ menu itme will add a new tree item to the selected tree item. When the ‘Remove Item’ menu item is clicked, the selected tree item and its sub tree items will be removed from the jqxTree.

jquery tree with context menu

Let’s see the implementation in a few steps.

1. Add the JavaScript and CSS files.

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.1.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/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>


2. Create the HTML structure. The first DIV tag with id=’jqxTree’ defines the structure of the jqxTree widget. The second DIV tag with id=’jqxMenu’ defines the structure of the Context Menu.

<div id='jqxTree'>
<ul>
<li id='home' item-selected='true'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
</ul>
</div>
<div id='jqxMenu'>
<ul>
<li>Add Item</li>
<li>Remove Item</li>
</ul>
</div>
3. Initialize the jqxTree and jqxMenu widgets.In order to initialize the Tree, we select the ‘jqxTree’ DIV tag and call the jqxTree constructor and set its ‘width’, ‘height’, and ‘theme’ properties. The initialization of the Context Menu includes selecting the ‘jqxMenu’ DIV tag and calling the jqxMenu constructor. In the constructor, we set the menu’s ‘width’, ‘height’ and ‘theme’ properties, too. We set two additional properties – ‘autoOpenPopup’ to false – if this property is true, the context menu will replace the browser’s context menu. However, we want to open the Context Menu only when the user right clicks a tree item and we set it to false. The ‘mode’ property is set to ‘popup’ which means that the jqxMenu will be initialized as a Context Menu.

// Create jqxTree
$('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: 'darkblue' });
var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', theme: 'darkblue', height: '56px', autoOpenPopup: false, mode: 'popup' });


4. Disable the standard browser’s context menu when the user clicks outside the Tree widget.

// disable the default browser's context menu.
$(document).bind('contextmenu', function (e) {
if ($(e.target).parents('.jqx-tree').length > 0) {
return false;
}
return true;
});


5. Create an utility function which checks whether the user clicked the mouse’s right button.
function isRightClick(event) {
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
return rightclick;
}


6. Open the Context Menu when the user clicks the mouse’s right button over the Tree widget. In order to achieve that, we trigger the ‘mousedown’ event of all LI elements in the jqxTree widget. Inside the callback function, we call the isRightClick utility function and open the Context Menu, if the pressed button is the mouse’s right button.
var clickedItem = null;
// open the context menu when the user presses the mouse right button.
$("#jqxTree li").live('mousedown', function (event) {
var target = $(event.target).parents('li:first')[0];
$("#jqxTree").jqxTree('selectItem', target);
var rightClick = isRightClick(event);
if (rightClick) {
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});


7. The final step is top implement the Context Menu’s logic for adding and removing Tree items. We trigger the Context Menu’s ‘itemclick’ event which is raised when the user clicks a menu item. In the callback function, we check whether the clicked menu item is the ‘Add Item’ or ‘Remove Item’ and call the jqxTree’s ‘addTo’ method or ‘removeItem’ method depending on the clicked context menu item.

$("#jqxMenu").live('itemclick', function (event) {
var item = $(event.args).text();
switch (item) {
case "Add Item":
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element);
}
break;
case "Remove Item":
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('removeItem', selectedItem.element);
}
break;
}
});

About admin


This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxMenu, jqxTree and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.



2 Responses to jQuery Tree with Context Menu

  1. John Smith says:

    This writeup is a total spam. The scripts do not execute. No jQuery tree is created

Leave a Reply