Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before an item is removed from the tree collection.

Event Data

eObjectAn event object which contains the item


This event can be handled by binding the 'itemremoved' event to the Menu widget object.

Version Information

Supported in: v1.0.


An example explaining how to create a handle to the itemremoving event in Menu widget.

By handling this event you can prevent removing of items depending on some custom conditions. By returning a false value, you can cancel this event. Whenever the 'Remove Item' button is clicked the currently selected item will be removed from the Menu, until only one root item remains.

$(document).ready(function() {

// Create an instance of Menu widget

var $bar = $('#menu').menu();


// Get the item that is currently selected in Menu

var getCurrentSelection = function(){

return $"option", "selectedItem");



// When 'Remove Item' button is clicked, it removes the currently selected item from the Menu

var remove = function(){

$"removeItem", getCurrentSelection());



// Create a handler to the itemremoving event


"itemremoving": function(e){

var itemCount = $"getList").length;

if (itemCount <= 1)

return false;



<!DOCTYPE html>



<link rel="stylesheet" href="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/"></script>



<button type="button" onclick="remove()" />Clear</button>

<div id="menu" class="widget">







<li ><span>MenuItem23</span></li>



<li ><span>MenuItem232</span>












<li ><span>MenuItem3</span></li>













width: 600px;

height: 0;



See Also