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

Question

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

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.

can you update your plunker? There is currently no grid. And also your picture ( which you actually can upload here) — Asqan
– Asqan, Commented Aug 21, 2015 at 12:08
@Asqan Please check it again. I just updated it. Thank you for your time. — Tony
– Tony, Commented Aug 21, 2015 at 16:11

Asqan · Accepted Answer · 2015-08-21 20:27:48Z

6

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

edited Aug 21, 2015 at 20:27

answered Aug 21, 2015 at 20:21

Asqan

4,51912 gold badges63 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

badr slaoui Over a year ago

as soon as you ungroup, no buttons shows up anymore which i guess is not a correct behaviour the solution is to use ng-show="row.treeLevel == 0 || !row.treeLevel"

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related