AngularJS directive for a tree grid, using Bootstrap
npm install angular-bootstrap-grid-treetree-grid-directive
===================
A grid to display data in tree structure by using Angular and Bootstrap.
src/treeGrid.css and src/tree-grid-directive.js in your HTML file after Bootstrap and Angular.
children array of the object. an example of tree-data will look like:
getTree method inside the temp folder.
displayName is not provided, field (object property) is used as displayName.
tree_data where you want to put the ability to expand and collapse.
tree-control to use expand all and collapse all. Check it out in the link provided for demo.
$rootscope field the directive will watch for programmatic expansion. When changed, the directive will search the tree for the expandingproperty with the same value, and expand the tree to that point. All other branches will be collapsed.
html
tree-data = "tree_data"
icon-leaf = "icon-file"
icon-expand = "icon-plus-sign"
icon-collapse = "icon-minus-sign"
`
`javascript
$scope.tree_data = [
{Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
children:[
{Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
children:[
{Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
{Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
]
icons: {
iconLeaf: "fa fa-sun-o"
}
},
{Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
children:[
{Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
]
}
],
icons: {
iconLeaf: "fa fa-flag",
iconCollapse: "fa fa-folder-open",
iconExpand: "fa fa-folder"
}
},
{Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];
`
$3
If it is desired to expand the tree after a (successful) search, you need to modify the template and add a true to the filter parameters.
<tr ng-repeat="row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions:true track by row.branch.uid">
Full example (based on original template):
`html
{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}
{{col.displayName || col.field}}{{col.displayName || col.field}}
ng-class="'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')" class="tree-grid-row">
ng-click="row.branch.expanded = !row.branch.expanded"
class="indented tree-icon">
{{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}
{{row.branch[col.field]}}
`
$3
There are two ways to specify the template of the pagination controls directive:
1. Use the treegridTemplateProvider in your app's config block to set a global template for your app:
myApp.config(function(treegridTemplateProvider) {
treegridTemplateProvider.setPath('path/to/treegrid/template.html');
});
`
2. Use the template-url attribute on each treegrid directive to override a specific instance:
`
`
$3
First, set the tree_data to an empty array:
$scope.tree_data = [];
Later, execute the query using promises and update the tree_data value with the resolved objects:
APIEndpoint
.find()
.then(function(objects){
$scope.tree_data = prepareDataForTreegrid(objects);
});
$3
If for any reason you want to use a custom HTML to show a specific cell, for showing an image, colorpicker,
or something else, you can use the cellTemplate option in the col-defs array, just use
{{ row.branch[col.field] }} as the placeholder for the value of the cell anywhere in the HTML - use {{ row.branch[expandingProperty.field] }}
if providing a template for the expanding property..
Example:
$scope.col_defs = [
{
field: "DemographicId",
displayName: "Demographic Id",
cellTemplate: "
"
}
];
You can use whatever HTML you want, and all Angular directives will work as expected.
Also, if you need to use some method or variable from your scope in the
cell template, you can pass the reference to cellTemplate as:
cellTemplateScope: {
click: function(data) { // this works too: $scope.someMethod;
console.log(data);
}
}
and then use it in cellTemplate` as: