LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


itemadded(e)

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

Event Data

ParamTypeDetails
eObjectAn event object which contains the item

Remarks

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

Version Information

Supported in: v1.0.

Example

In this example we are showing how to handle itemadded event in TreeView widget.

$(document).ready(function() {

// Create an instance of TreeView widget

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

 

// Get the number of present items in TreeView

var getItemCount = function(){

return $tree.treeview("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 TreeView

var add = function(){

var item = $tree.treeview("addItem", createNewItem());

}

 

// Create a handler to the itemadded event

$tree.on({

"itemadded": function(e){

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

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

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

Samples

See Also