Advanced User Interface Controls and Components
Loads data from local or remote data source into Menu.
| Param | Type | Details |
|---|---|---|
| data | Array | An array of item objects from local or remote data source |
This method does not return a value.
You can use this method to load data on demand, updating the whole Menu in the process or the content of some specified item.
Supported in: v1.0.
In this example we are showing how to use loadData method to populate the Menu 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 Menu.
$(document).ready(function() {
// Create an instance of Menu widget
var $bar = $('#menu').menu();
var loadRemote = function(){
$.getJSON("sample-data.json", function(data){
var dataFields = {
id : 'id',
pid : 'pid',
text : 'text',
expanded: 'isExpanded'
$bar.menu("loadData", data, null, dataFields);
})
.error(function(){
alert("AJAX failed to load data");
});
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.menu.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.menu.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<button type="button" onclick="loadRemote()" />Clear</button>
<div id="menu" class="widget"></div>
</div>
</body>
</html>
.widget
{
width: 600px;
height: 0;
}
[
{ "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" }
]
A sample which demonstrates how to use local data to load the content in Menu.
A sample which demonstrates how to populate Menu widget using remote data binding. Access to remote data files is done using jQuery $http service.