Advanced User Interface Controls and Components
Occurs before an item becomes collapsed.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the collapsing item |
This event can be handled by binding the 'beforecollapse' event to the TreeView widget object.
Supported in: v1.0.
In this example we are showing how to handle beforecollapse event in TreeView widget.
By handling this event you can prevent item from collapsing depending on some custom conditions. In this example item with text value set to 'Business' cannot collapse.
$(document).ready(function() {
// Create an instance of TreeView widget
var $tree = $('#treeview').treeview();
$tree.on({
"beforecollapse": function(e){
if (e.object.text === 'Business')
return false;
});
});
<!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>Books</span>
<ul>
<li><span>Art</span></li>
<li><span>Business</span>
<ul>
<li><span>Economics</span></li>
<li data-expanded=false><span>Investing</span>
<ul>
<li><span>Bonds</span></li>
<li><span>Options</span></li>
<li><span>Stocks</span></li>
</ul>
</li>
<li><span>Management</span></li>
<li><span>Small Business</span></li>
</ul>
</li>
<li><span>Health</span></li>
<li><span>Literature</span></li>
<li data-expanded=false><span>Science</span>
<ul>
<li><span>Astronomy</span></li>
<li><span>Mathematics</span></li>
<li><span>Evolution</span></li>
<li><span>Nature</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Computers</span></li>
<li data-expanded=false><span>Electronics</span>
<ul>
<li><span>Camera</span></li>
<li><span>Cell Phones</span></li>
<li><span>Video Game Consoles</span></li>
</ul>
</li>
<li data-expanded=false><span>Music</span>
<ul>
<li><span>Blues</span></li>
<li><span>Classic Rock</span></li>
<li><span>Pop</span></li>
<li><span>Jazz</span></li>
</ul>
</li>
<li><span>Software</span>
<ul>
<li><span>Games</span></li>
<li><span>Operating Systems</span></li>
<li><span>Network & Servers</span></li>
<li><span>Security</span></li>
</ul>
</li>
<li data-expanded=false><span>Sports</span>
<ul>
<li><span>Baseball</span></li>
<li><span>Martial Arts</span></li>
<li><span>Running</span></li>
<li data-expanded=false><span>Tennis</span>
<ul>
<li><span>Accessories</span></li>
<li><span>Balls</span></li>
<li><span>Racquets</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Video Games</span></li>
<li><span>Watches</span></li>
</ul>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to handle different events in TreeView widget.