Border

IntegralUI Web

Native Angular and AngularJS UI Components


TreeView / Remote Data Binding


To populate the TreeView with some data, in this sample we are using a JSON file as data source. You need to select some sample data file in JSON format, it can be either flat or hirarchical data. Then either use AJAX or getJSON method from jQuery to load the data into the TreeView.

As you can see in current view above, some items are collapsed while others are expanded. This also can be set in your data file. Additionally you can set other item properties like: icon, state image, etc.

Related article: Data Binding in TreeView jQuery

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>TreeView - Remote Data Binding</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<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/integralui.widget.min.js"></script>

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

<style type="text/css">

.widget

{

width: 300px;

height: 300px;

}

</style>

</head>

<body>

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

</body>

</html>

$(document).ready(function() {

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

 

$.getJSON("data.json", function(data){

$.each(data, function(id, item){

$tree.treeview('addItem', item);

});

});

});

{

"item1" : {

"text": "Business",

"id" : 1,

"items": [

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

{

"text": "Investing",

"id" : 12,

"pid": 1,

"expanded": false,

"items": [

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

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

{ "text": "Stocks", "id" : 123, "pid": 12 }

]

},

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

{ "text": "Small Business", "id" : 14, "pid": 1 }

]

},

"item2" : {

"text": "Electronics",

"id" : 2,

"items": [

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

{

"text": "Cell Phones",

"id" : 22,

"pid": 2,

"items": [

{ "text": "Motorola", "id" : 221, "pid": 22 },

{ "text": "Nokia", "id" : 222, "pid": 22 },

{ "text": "Samsung", "id" : 223, "pid": 22 }

]

},

{ "text": "Video Game Consoles", "id" : 23, "pid": 2 }

]

},

"item3" : {

"text": "Music",

"id" : 3,

"expanded": false,

"items": [

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

{ "text": "Classic Rock", "id" : 32, "pid": 3 },

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

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

]

},

"item4" : {

"text": "News",

"id" : 4,

"expanded": false,

"items": [

{ "text": "Culture", "id" : 41, "pid": 4 },

{ "text": "Health", "id" : 42, "pid": 4 },

{ "text": "Science", "id" : 43, "pid": 4 },

{ "text": "World", "id" : 44, "pid": 4 }

]

},

"item5" : {

"text": "Sports",

"id" : 5,

"items": [

{ "text": "Soccer", "id" : 51, "pid": 5 },

{ "text": "Tennis", "id" : 52, "pid": 5 }

]

}

}


Border