Advanced User Interface Controls and Components
Occurs when item is clicked using right mouse button in TreeView component.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the item and mousePos objects |
This event can be handled by binding the 'itemrightclick' event to the TreeView widget object.
The mousePos object associated with this event holds coordinates of mouse position relative to the parent page.
Supported in: v1.0.
In this example we are showing how to handle the itemrightclick event in TreeView widget. Whenever an item is clicked using the right mouse button, a pop-up message will appear stating which item is clicked.
$(document).ready(function() {
// Create an instance of TreeView widget
var $tree = $('#treeview').treeview();
// Create a handler to the itemrightclick event
$tree.on({
"itemrightclick": function(e){
alert("itemrightclick event was fired when " + e.object.text + " is clicked");
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.treeview.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>
</head>
<body>
<div id="treeview" class="widget">
<ul>
<li><span>Item1</span></li>
<li><span>Item2</span>
<ul>
<li><span>Item21</span></li>
<li>><span>Item22</span></li>
<li data-expanded=false><span>Item23</span></li>
<ul>
<li><span>Item231</span></li>
<li data-expanded=false><span>Item232</span>
<ul>
<li><span>Item2321</span></li>
<li><span>Item2322</span></li>
</ul>
</li>
<li><span>Item233</span></li>
</ul>
</li>
<li><span>Item24</span></li>
</ul>
</li>
<li data-expanded=false><span>Item3</span></li>
<ul>
<li><span>Item31</span></li>
<li><span>Item32</span></li>
<li><span>Item33</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to handle different events in TreeView widget.