CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Tony
Tony

Reputation: 1445

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

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.

Upvotes: 3

Views: 1848

Answers (1)

Asqan
Asqan

Reputation: 4489

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

Upvotes: 6

Related Questions