Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before a new item is added to the tree collection.

Event Data

eObjectAn event object which contains the item


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

Version Information

Supported in: v1.0.


In this example we are showing how to handle itemadding event in Menu widget.

By handling this event you can prevent adding of item depending on some custom conditions. By returning a false value, you can cancel this event. Whenever the 'Add Item' button is clicked a new item is added, until Menu contains 10 items. Afterwards, additional items can't be added.

$(document).ready(function() {

// Create an instance of Menu widget

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


// Get the number of present items in Menu

var getItemCount = function(){

return $"getList").length + 1;



// Create a new item with its header title

var createNewItem = function(){

return { text: "Item" + getItemCount() };



// When 'Add Item' button is clicked, add a new item to the Menu

var add = function(){

var item = $"addItem", createNewItem());



// Create a handler to the itemadding event and allow Menu to contain only 3 items


"itemadding": function(e){

var itemCount = getItemCount() - 1;

if (itemCount > 10)

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="add()" />Add Item</button>

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





width: 600px;

height: 0;



See Also