LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


findItemByText(text)

Searches through all items in tree hierarchy for a match using specified text.

Parameters

ParamTypeDetails
textStringThe item text value to search for

Return Value

If successful, the item object that contains the specified text, otherwise null.

Version Information

Supported in: v1.0.

Example

In this example we are searching for an item with text value set to 'Item231'. If item is found, it is selected and TreeView is scrolled to make sure item is present in current view.

$(document).ready(function() {

// Create an instance of TreeView widget

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

 

var searchItems = function(){

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

if (item)

$tree.treeview("option", "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>

<button type="button" id="search" onclick="searchItems()" />Search Items</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;

}

See Also