Angular ui-grid grouping header
I am trying to show the group headers as a cellTemplate, this is the template I am using:
<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 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 two groups that have a "check" sign, I found out this is happening because COL_FIELD when grouped is text that concatenates the rows count (0 (50), 1 (15)) which is true is there a good way to set the correct group title?
source to share
In http://ui-grid.info/docs/#/tutorial/209_grouping an example: you see at the bottom of the gender filter, which operates in the grouped column. It decomposes the value and then filters the uncountable parcel and then returns the string again.
To apply this logic to your cellTemplate, you want to put a function in your template to break up the value and only pull out 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 will need to write a $ scope.checkBool function to do indestructibility and return true or false.
If you also want a counter, you will need to write some logic to get the counting portion of the cell and add it to the end.
Some of this logic is currently being rewritten, which may provide ways to make it easier.
source to share