Need help modifying this Angular component: (more details here: https://github.com/khan4019/tree-grid-directive)
The issue at hand is simple. The tree-grid component does not allow formatting of specific columns using filters. For example, I want to convert all cells in the description column to uppercase. You can see an example here:
http://plnkr.co/edit/6vSAKpZtoEB98fTOqtA4?p=preview
In the treeGridTest.js file, lines 36-41 define the columns:
$scope.col_defs = [
{ field: "Description"},
{ field: "Area"},
{ field: "Population"},
{ field: "TimeZone", displayName: "Time Zone"}
];
In the tree-grid-directive.js file, the 31st line (part of the template code) is responsible for displaying data in cells:
<td ng-repeat=\"col in colDefinitions\">{{row.branch[col.field]}}</td>\To mimic ng-grid behavior, I added a new property called cellDef to each object in $scope.col_defs:
$scope.col_defs = [
{ field: "Description", cellDef: "{{row.branch[col.field] | uppercase}}"},
{ field: "Area", cellDef: "{{row.branch[col.field]}}"},
{ field: "Population", cellDef: "{{row.branch[col.field]}}"},
{ field: "TimeZone", displayName: "Time Zone", cellDef: "{{row.branch[col.field]}}"}
];
Then, I replaced the 31st line in the tree-grid-directive.js file with:
<td ng-repeat=\"col in colDefinitions\">{{col.cellDef}}</td>\However, instead of seeing the description in uppercase, every cell still displays {{row.branch[col.field]}}. Take a look here:
http://plnkr.co/edit/97fcUbUKC5e5svh3r7ML?p=preview
Any suggestions on how to resolve this? Your assistance would be greatly appreciated as I am fairly new to JavaScript and the AngularJS framework.