How to show a button only in first grouped row in AngularJS ui-grid 3.0?

3
votes

For the grouped ui-grid in the Plunker link, the third column, how to let the button only shows in the groupHeader rows?

ui-grid

Plunker: http://plnkr.co/edit/KNNUPhAmD91HeHkDaQyr?p=preview

I tried using the following cellTemplate on the third column, but it doesn't work, since the third column is not a grouped column. 

cellTemplate: '<div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div>'

Most of the codes of the grid are from official UI Grid tutorial 209. I just added the button part.

1
javascriptangularjsangular-ui-grid
can you update your plunker? There is currently no grid. And also your picture ( which you actually can upload here) – Asqan
@Asqan Please check it again. I just updated it. Thank you for your time. – Tony

1 Answers

6
votes

Just add a ng-show in your cell template

<button ng-show="row.treeLevel==0" type="button" class="btn btn-success">

Here is the working version of your Plunker

http://plnkr.co/edit/vYpAi4AV0a9cidcoejFY?p=preview