khan4019/tree-grid-directive

cellTemplate not working within $scope.expanding_property

Closed this issue · 3 comments

The cellTemplate property doesn't seem to work when used within $scope.expanding_property.

Here is my sample code
...
$scope.expanding_property = {
field: "Name",
displayName: "Name",
sortable : true,
filterable: true,
cellTemplate: '{{ row.branch.Name }}'
};
...

Thanks

A little bit late, but for reference...
You can easily archive what you want if you use your own template. You need to add the following code (or something equal for your case):
<span class="indented tree-label" ng-click="on_user_click(row.branch)" ng-if="expandingProperty.cellTemplate" compile="expandingProperty.cellTemplate" cell.template-scope="expandingProperty.cellTemplateScope"></span>

Full Example: (a copy of the original template, with added support for celTemplate on expanding_property)

<div class="table-responsive">
   <table class="table tree-grid">
   <thead>
     <tr>
       <th><a ng-if="expandingProperty.sortable" ng-click="sortBy(expandingProperty)">{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}</a><span ng-if="!expandingProperty.sortable">{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}</span><i ng-if="expandingProperty.sorted" class="{{expandingProperty.sortingIcon}} pull-right"></i></th>
       <th ng-repeat="col in colDefinitions"><a ng-if="col.sortable" ng-click="sortBy(col)">{{col.displayName || col.field}}</a><span ng-if="!col.sortable">{{col.displayName || col.field}}</span><i ng-if="col.sorted" class="{{col.sortingIcon}} pull-right"></i></th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions track by row.branch.uid"
       ng-class="'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')" class="tree-grid-row">
       <td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon"
              ng-click="row.branch.expanded = !row.branch.expanded"
              class="indented tree-icon"></i></a><span ng-if="!expandingProperty.cellTemplate" class="indented tree-label" ng-click="on_user_click(row.branch)">
             {{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}</span><span class="indented tree-label" ng-click="on_user_click(row.branch)" ng-if="expandingProperty.cellTemplate" compile="expandingProperty.cellTemplate" cell.template-scope="expandingProperty.cellTemplateScope"></span>
       </td>
       <td ng-repeat="col in colDefinitions">
         <div ng-if="col.cellTemplate" compile="col.cellTemplate" cell-template-scope="col.cellTemplateScope"></div>
         <div ng-if="!col.cellTemplate">{{row.branch[col.field]}}</div>
       </td>
     </tr>
   </tbody>
 </table>
</div>

That makes sense. Thanks for the reply!

Closing this as solved. Thanks to @torsten-sauer for the solution.