Customizing the 1st column

[t-humeau]

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

[t-humeau]

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).

[jrnorrisjr]

I have this issue too but the above solution did not work.

[jrnorrisjr]

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'}

[abhilashpullelil]

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 1) Create a scope object to hold custom property to first column $scope.expandingProperty = {}; 2) 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) 3) 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)

4) 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..... :)

[LaGhyoute]

I did as said at the second comment but it's not working. tree-grid doesn't show

[TrueDub]

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.