LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


selectedIndex

Gets or sets the currently selected item by using its index.

Property Value

A Number. The default value is -1, stating that there is no item currently selected in TreeView.

Remarks

Whenever a new item is added to the TreeView, automatically becomes selected. This property value changes depending on the index of selectedItem in the list of all items present in the TreeView.

Version Information

Supported in: v1.0.

Example

The following example shows how to select a item from code using the item index. In our example the item at position 2 in the list will become selected. That means the third item, because the list is indexed starting from 0.

$(document).ready(function() {

// Create an instance of TreeView widget

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

 

// Select the third item

$tree.treeview("option", "selectedIndex", 2);

});

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