Customize AngularJs UI-Grid Tree base Header

Question

it is possible to customize the template of the tree base header (the column which contains the "+" and "-" icon when the grouping is active ) ?

I want to modify the content of the blank cells and display inside them a row number ({{row.grid.renderContainers.body.visibleRowsCache.indexOf(row)}}) ...

I found the content of the template I need to modify:

<i ng-class="
   { 'ui-grid-icon-minus-squared': 
       ( 
           (grid.options.showTreeExpandNoChildren && row.treeLevel > -1)
           || (row.treeNode.children && row.treeNode.children.length > 0)
       ) && row.treeNode.state === 'expanded', 
     'ui-grid-icon-plus-squared': 
       ( 
          (grid.options.showTreeExpandNoChildren && row.treeLevel > -1) 
          || ( row.treeNode.children && row.treeNode.children.length > 0)  
       ) 
     && row.treeNode.state === 'collapsed'
   }" 

   ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}"
   class="ui-grid-icon-minus-squared" style="padding-left: 10px;">
</i>

...but I don't see how to change it and store my modification in the gridOption

score 1 · Answer 1 · answered Apr 12 '18 at 12:13

Yes, it is possible. I needed the same thing. While searching I found this thread. This mentions that you can override templates by feeding the templateCache. (I used the accepted method (using script tag).) For this I just needed the reference of the template which I wanted to override, so "ui-grid/treeBaseRowHeaderButtons". For my case I inserted a row count number before the icon. The code I placed in my view's html:

<script id="ui-grid/treeBaseRowHeaderButtons" type="text/ng-template">
    <div class="ui-grid-tree-base-row-header-buttons" ng-class="{'ui-grid-tree-base-header': row.treeLevel > -1 }" ng-click="treeButtonClick(row, $event)">
        <span class="countNumber">{{ row.entity.count }}</span>
        <i ng-class="{'ui-grid-icon-minus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel> -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}"
           ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}">
        </i> &nbsp;
    </div>
</script>

Customize AngularJs UI-Grid Tree base Header

1 Answers1