angular ui-grid grouping header

Question

i am trying to make the group headers to be shown as the cellTemplate, this is the template i use:

<div class="ui-grid-cell-contents">
    <div ng-show="COL_FIELD">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="COL_FIELD">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

and this is the columnDefs:

{ 
    name:'active', 
    width: 100, 
    cellTemplate: $templateRequest('scripts/common/partials/formatter/boolean.tpl.html') 
}

this shows the signs currently on the grid but when i group it, it shows 2 groups both of them have the "check" sign", i found out that it happens because the COL_FIELD on grouping is text that combines the count rows (0 (50), 1 (15)) which is true is there good way to set the group header currect?

PaulL · Accepted Answer · 2015-05-17 18:45:22Z

There is an example in http://ui-grid.info/docs/#/tutorial/209_grouping, you'll see at the bottom a gender filter that is operating on the grouped column. It's unstringing the value, then applying the filter to the portion without the count, then putting the string back together again.

To apply this logic to your cellTemplate you'd want to put a function in your template to unstring the value and get out just the bit you want:

<div class="ui-grid-cell-contents">
    <div ng-show="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

You'd need to write the $scope.checkBool function to do the unstringing and return true or false.

If you also want the count then you'd need to write some logic to get the count part of the cell and append it to the end.

Some of this logic is being rewritten at the moment, which may give ways to make this easier.

Collectives™ on Stack Overflow

angular ui-grid grouping header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related