LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


ensureVisible(item)

Ensures a specified item is visible in current view of TreeView widget.

Parameters

ParamTypeDetails
itemObjectThe item to become visible in current view of TreeView

Return Value

This method does not return a value.

Remarks

If specified item is a child and placed deep within tree hierarchy, all parent items will become expanded. Additionally, the current view of TreeView will be scrolled to make sure item becomes visible.

Version Information

Supported in: v1.0.

Example

In this example we are showing how to call ensureVisible method. The specified item will become visible and selected.

$(document).ready(function() {

// Create an instance of TreeView widget

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

 

var makeItemVisible = function(){

var item = $tree.treeview("findItemByText", 'Item2321');

if (item){

$tree.treeview("ensureVisible", item);

$tree.treeview("selectedItem", item);

}

}

});

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

}

See Also