Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before an item becomes expanded.

Event Data

eObjectAn event object which contains the expanding item


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

Version Information

Supported in: v1.0.


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

By handling this event you can prevent item from collapsing depending on some custom conditions. In this example item with id value set to '23' cannot expand.

$(document).ready(function() {

// Create an instance of TreeView widget

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



"beforeexpand": function(e){

if ( === 23)

return false;



<!DOCTYPE html>



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



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


<li id="1"><span>Item1</span></li>

<li id="2"><span>Item2</span>


<li id="21"><span>Item21</span></li>

<li id="22"><span>Item22</span></li>

<li id="23" data-expanded=false><span>Item23</span></li>


<li id="231"><span>Item231</span></li>

<li id="232" data-expanded=false><span>Item232</span>


<li id="2321"><span>Item2321</span></li>

<li id="2322"><span>Item2322</span></li>



<li id="233"><span>Item233</span></li>



<li id="24"><span>Item24</span></li>



<li id="3" data-expanded=false><span>Item3</span></li>


<li id="31"><span>Item31</span></li>

<li id="32"><span>Item32</span></li>

<li id="33"><span>Item33</span></li>



<li id="4"><span>Item4</span></li>


<li id="41"><span>Item41</span></li>

<li id="42" data-expanded=false><span>Item42</span>


<li id="421"><span>Item421</span></li>

<li id="422"><span>Item422</span></li>











width: 300px;

height: 300px;



See Also