LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


itemRemoved(e)

Occurs after an item is removed from the tree collection.

Event Data

ParamTypeDetails
eObjectAn event object which contains the item

Remarks

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

Version Information

Supported in: v1.0.

Example

An example explaining how to create a handle to the itemremoved event in TreeView widget. Whenever the 'Remove Item' button is clicked the currently selected item will be removed from the TreeView, after which console log will display a message stating that itemremoved event is fired.

$(document).ready(function() {

// Create an instance of TreeView widget

var $tree = $('#treeview').treeview();

 

// Get the item that is currently selected in TreeView

var getCurrentSelection = function(){

return $tree.treeview("option", "selectedItem");

}

 

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

var remove = function(){

$tree.treeview("removeItem", getCurrentSelection());

}

 

// Create a handler to the itemremoved event

$tree.on({

"itemremoved": function(e){

console.log("itemremoved event was fired for item: " + e.object.text);

});

});

<!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>

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

<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;

}

Samples

See Also