-
Couldn't load subscription status.
- Fork 180
Closed
Labels
Description
html:
<tree-grid tree-data="settings.documentsTreeDdata" tree-control="my_tree" col-defs="col_defs" expand-on="expanding_property" on-select="my_tree_handler(branch)" expand-level="5" icon-leaf= "glyphicon glyphicon-globe"></tree-grid>
JS:
function initTreeView() {
var tree;
var rawTreeData = [
{"DemographicId":1,"ParentId":0,"Name":"United States of America","Description":"United States of America", "Area":9826675,"Population":318212000,"TimeZone":"UTC -5 to -10"},
{"DemographicId":2,"ParentId":1,"Name":"California","Description":"The Tech State","Area":423970,"Population":38340000,"TimeZone":"Pacific Time"},
{"DemographicId":3,"ParentId":2,"Name":"San Francisco","Description":"The happening city","Area":231,"Population":837442,"TimeZone":"PST"},
{"DemographicId":4,"ParentId":2,"Name":"Los Angeles","Description":"Disco city","Area":503,"Population":3904657,"TimeZone":"PST"},
{"DemographicId":5,"ParentId":1,"Name":"Illinois","Description":"Not so cool","Area":57914,"Population":12882135,"TimeZone":"Central Time Zone"},
{"DemographicId":6,"ParentId":5,"Name":"Chicago","Description":"Financial City","Area":234,"Population":2695598,"TimeZone":"CST"},
{"DemographicId":7,"ParentId":1,"Name":"Texas","Description":"Rances, Oil & Gas","Area":268581,"Population":26448193,"TimeZone":"Mountain"},
{"DemographicId":8,"ParentId":1,"Name":"New York","Description":"The largest diverse city","Area":141300,"Population":19651127,"TimeZone":"Eastern Time Zone"},
{"DemographicId":14,"ParentId":8,"Name":"Manhattan","Description":"Time Square is the place","Area":269.403,"Population":0,"TimeZone":"EST"},
{"DemographicId":15,"ParentId":14,"Name":"Manhattan City","Description":"Manhattan island","Area":33.77,"Population":0,"TimeZone":"EST"},
{"DemographicId":16,"ParentId":14,"Name":"Time Square","Description":"Time Square for new year","Area":269.40,"Population":0,"TimeZone":"EST"},
{"DemographicId":17,"ParentId":8,"Name":"Niagra water fall","Description":"Close to Canada","Area":65.7,"Population":0,"TimeZone":"EST"},
{"DemographicId":18,"ParentId":8,"Name":"Long Island","Description":"Harbour to Atlantic","Area":362.9,"Population":0,"TimeZone":"EST"},
{"DemographicId":51,"ParentId":1,"Name":"All_Other","Description":"All_Other demographics","Area":0,"Population":0,"TimeZone":0},
{"DemographicId":201,"ParentId":0,"Name":"India","Description":"Hydrabad tech city", "Area":9826675,"Population":318212000,"TimeZone":"IST"},
{"DemographicId":301,"ParentId":0,"Name":"Bangladesh","Description":"Country of love", "Area":9826675,"Population":318212000,"TimeZone":"BST"}
];
var myTreeData = getTree(rawTreeData, 'DemographicId', 'ParentId');
$scope.settings.documentsTreeData = myTreeData;
$scope.my_tree = tree = {};
$scope.expanding_property = "Name";
$scope.col_defs.length = 0;
var columns = [
{ field: "Description"},
{ field: "Area"},
{ field: "Population"},
{ field: "TimeZone", displayName: "Time Zone"}
];
for ( var x = 0; x < columns.length; x ++ ) {
$scope.col_defs.push(columns[x]);
}
$scope.my_tree_handler = function(branch){
console.log('you clicked on', branch)
};
}
function getTree(data, primaryIdName, parentIdName){
if(!data || data.length==0 || !primaryIdName ||!parentIdName)
return [];
var tree = [],
rootIds = [],
item = data[0],
primaryKey = item[primaryIdName],
treeObjs = {},
parentId,
parent,
len = data.length,
i = 0;
while(i<len){
item = data[i++];
primaryKey = item[primaryIdName];
treeObjs[primaryKey] = item;
parentId = item[parentIdName];
if(parentId){
parent = treeObjs[parentId];
if(parent.children){
parent.children.push(item);
}
else{
parent.children = [item];
}
}
else{
rootIds.push(primaryKey);
}
}
for (var i = 0; i < rootIds.length; i++) {
tree.push(treeObjs[rootIds[i]]);
};
return tree;
}
$scope.col_defs = [];
And later call
initTreeView()
tree-grid only displays the three elements (United States of America, India, Bangladesh) not expanded