Customizing the 1st column
Closed this issue · 6 comments
Thanks for the nice tree table.
It seems the first item found at each level is automatically put in the 1st column.
If I put that item in the col_defs, the item then appears twice.
I can see that this is the case in your demo:
The col_defs only specifies the columns from the 2nd one "Description" and doesn't specify anything for the 1st column "Name"
So how can I customize the 1st column with a cellTemplate and a custom header?
Thank in advance
Ok, after some efforts I managed to find a work around.
It consists in customizing the default template as follows.
<script type="text/ng-template" id="path/to/treegrid/template.html">
<div class="table-responsive">
<table class="table tree-grid">
<thead>
<tr>
<th>{{expandingProperty.displayName || expandingProperty.field || expandingProperty}}</th>
<th ng-repeat="col in colDefinitions"> {{col.displayName || col.field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tree_rows | filter:{visible:true} 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)" compile="expandingProperty.cellTemplate">
</span>
<span ng-if="!expandingProperty.cellTemplate" class="indented tree-label" ng-click="on_user_click(row.branch)">
{{row.branch[expandingProperty.field] || row.branch[expandingProperty]}}
</span>
</td>
<td ng-repeat="col in colDefinitions" style="width:100px;">
<div ng-if="col.cellTemplate" compile="col.cellTemplate"></div>
<div ng-if="!col.cellTemplate">{{row.branch[col.field]}}</div>
</td>
</tr>
</tbody>
</table>
</div>
</script>
This needs to be added in the HTML and in the tree-grid set the template-url like this:
<tree-grid ng-show="tree_file" tree-data="tree_file" col-defs="col_defs_files"
expand-on="expanding_property_files"
template-url="path/to/treegrid/template.html"></tree-grid>
The 1st column is handled/customized by the expandingProperty while the others are handled by the colDefinitions (that wasn't obvious to me until I extracted the default template from the code).
Then here is what I have for the expandingProperty and colDefinitions:
$scope.expanding_property_files = {
field: "Path",
displayName: "Path",
cellTemplate: "<span title='{{row.branch.RealPath}}' >{{ row.branch[expandingProperty.field] }}</span>"
};
$scope.col_defs_files = [
{
field: "size",
displayName: "Size",
cellTemplate: "<span width='40' >{{ row.branch[col.field] }}</span>"
},
{
field: "mtime",
displayName: "Date"
}
];
Note that the expandingProperty default structure accepts field and displayName properties but not cellTemplate. (I needed to customize the template for that).
I have this issue too but the above solution did not work.
Actually I only needed to change the display name and it works as indicated in the documentation. Sest expandingProperty to an object instead of a string {field: 'fieldname', displayName: 'displayname'}
Hi all,
I got the same issue as the first column is repeating when configure it in column-def.
But we can solve this issue by using "expand-on" attribute in the element. Actually the author forgot to document "expand-on" in detail.
How to Fix - Step by step
-
Create a scope object to hold custom property to first column
$scope.expandingProperty = {}; -
Assign required configuration to this object
$scope.expandingProperty = {
field: "Name",
displayName: "Borrowers",
filterable: true
};
(in my case I want to change it's display name and make it searchable) -
Add attribute "expand-on" to your tree-grid element and assign it's value as your scope object which hold the properties for your first column ($scope.expandingProperty)
-
That's all !!!
Note : Please do not add configuration of first column to "columnDefs". It will recreate your first column. Always specifies configuration of your first columns in "expand-on" object.
I think this will solve this issue.
Happy coding..... :)
I did as said at the second comment but it's not working. tree-grid doesn't show
I've incorporated the changes from this issue into the code, so that you can provide a cellTemplate to the expanding property column. This is available here now, and will be in the next releases to NPM and (hopefully) Bower. Closing this issue now.