LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


loadData(data, parent, fields)

Loads data from local or remote data source into TreeView.

Parameters

ParamTypeDetails
dataArrayAn array of item objects from local or remote data source

Return Value

This method does not return a value.

Remarks

You can use this method to load data on demand, updating the whole TreeView in the process or the content of some specified item.

Version Information

Supported in: v1.0.

Example

In this example we are showing how to use loadData method to populate the TreeView from remote data source. Data source in this case is a JSON file which contains a flat list of item objects. We are using dataFields object settings to map the fields names from data source to the ones used by the TreeView.

$(document).ready(function() {

// Create an instance of TreeView widget

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

 

var loadRemote = function(){

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

var dataFields = {

id : 'id',

pid : 'pid',

text : 'text',

expanded: 'isExpanded'

 

$tree.treeview("loadData", data, null, dataFields);

})

.error(function(){

alert("AJAX failed to load data");

});

}

});

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

<button type="button" onclick="loadRemote()" />Clear</button>

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

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

[

{ "id": "1", "text": "Dairy", "isExpanded": false },

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

{ "id": "12", "pid": "1", "text": "Butter" },

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

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

{ "id": "2", "text": "Fruits" },

{ "id": "21", "pid": "2", "text": "Berries", "isExpanded": false },

{ "id": "211", "pid": "21", "text": "BlackBerries" },

{ "id": "212", "pid": "21", "text": "CranBerries" },

{ "id": "213", "pid": "21", "text": "StrawBerries" },

{ "id": "22", "pid": "2", "text": "Pits" },

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

{ "id": "24", "pid": "2", "text": "Citrus Fruits", "isExpanded": false },

{ "id": "241", "pid": "24", "text": "Oranges" },

{ "id": "242", "pid": "24", "text": "Lemons" },

{ "id": "25", "pid": "2", "text": "Melons" },

{ "id": "26", "pid": "2", "text": "Tropical Fruits" },

{ "id": "261", "pid": "26", "text": "Avocados" },

{ "id": "262", "pid": "26", "text": "Bananas" },

{ "id": "263", "pid": "26", "text": "Dates" },

{ "id": "3", "text": "Grains" },

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

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

{ "id": "42", "pid": "4", "text": "Lamb", "isExpanded": false },

{ "id": "421", "pid": "42", "text": "Lamb Breast" },

{ "id": "422", "pid": "42", "text": "Lamb Leg" },

{ "id": "423", "pid": "42", "text": "Lamb Ribs" },

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

{ "id": "5", "text": "Sweets" }

{ "id": "6", "text": "Vegetables" }

{ "id": "7", "text": "Water" }

]

Samples

See Also