LIDOR SYSTEMS

Advanced User Interface Controls and Components

Find Item by Id or Text in TreeView for AngularJS

Created: 27 June 2014

When there are many items present in tree hierarchy it is hard to find a specific one. IntegralUI TreeView directive for AngularJS contains methods which makes the search process easier. In following section we will show you how to locate a specific item using its unique identifier or its text value.

Search Items in TreeView for AngularJS
TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Similar: TreeView Component for Angular 2

At first let’s create a tree structure. When constructing the tree structure you can provide your own identifier for each item, or if item’s id is not present the TreeView will create a unique one. In either case each item will have a unique identifier. For example:

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){

$scope.treeName = "treeSample";

$scope.data = [

{

id: "1",

text: "Books",

items: [

{ id: "11", pid: "1", text: "Art" },

{

id: "12",

pid: "1",

text: "Business",

items: [

{ id: "121", pid: "12", text: "Economics" },

{ id: "122", pid: "12", text: "Management" },

{ id: "123", pid: "12", text: "Small Business" }

]

},

{ id: "13", pid: "1", text: "Health" },

{ id: "14", pid: "1", text: "Literature" }

]

},

{

id: "2",

text: "Music",

expanded: false,

items: [

{ id: "21", pid: "2", text: "Blues" },

{ id: "22", pid: "2", text: "Classic Rock" },

{ id: "23", pid: "2", text: "Pop" },

{ id: "24", pid: "2", text: "Jazz" }

]

},

{

id: "3",

text: "Sports",

expanded: false,

items: [

{ id: "31", pid: "3", text: "Baseball" },

{ id: "32", pid: "3", text: "Martial Arts" },

{ id: "33", pid: "3", text: "Running" },

{ id: "34", pid: "3", text: "Tennis" }

]

},

{ id: "4", text: "Watches" }

];

 

$scope.searchType = 'ID'

$scope.searchValue = ''

}]);

<!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/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<input type="radio" ng-model="searchType" value="ID">Id</input>

<input type="radio" ng-model="searchType" value="Text">Text</input><br />

<input type="text" ng-model="searchValue"></input>

<button ng-click="searchItems()">Search</button><br />

<integralui-treeview name="{{treeName}}" items="data"></integralui-treeview>

</div>

</body>

</html>

In this example we have created a tree structure of items where each item has a unique identifier, parent to which they belong and their text representing the item label.

Find Item Using Identifier

Each item in tree hierarchy contains a unique identifier which we can use to locate its position in the tree. In order to find a specific item we can manually search the tree for a match, but it’s quicker if we use the built-in service which contains the findItemById method.

In our example we will use a text box and a button to search for a specific item. Whenever a new value is entered into the text box and button is clicked the find method will execute searching for a matching item. On success, this method will return the found item object. If there is no item present in the tree which matches the specified identifier, a null value is returned:

$scope.searchItemsById = function(){

var item = $treeService.findItemById($scope.treeName, $scope.searchValue);

if (item)

alert("Item that matches specified criteria is: " + item.text);

}

In above code when item is found a message box will pop-up with message stating the item text.

Find Item Using Text

In the same way as above example, we can search the tree structure for a matching item, but using a text value this time. For this purpose we need to use the findItemByText method.

$scope.searchItemsByText = function(){

var item = $treeService.findItemByText($scope.treeName, $scope.searchValue);

if (item){

$treeService.selectedItem($scope.treeName, item);

$treeService.ensureVisible($scope.treeName, item);

}

}

In this case when item is found it will become selected. Additionally we are using the ensureVisible methos to make sure item is present in cuyrrent view of the TreeView. This method will expand all parent items for the found item and will scroll the current view, if necessary.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.