The ui-grid
example on the official website ( http://ui-grid.info/docs/#/tutorial/209_grouping ) presents a grouping feature, which looks like this:
I would like to have the Grouping
menu item, but not have the Aggregate
ones (count, sum, max, min, avg) in the column menu and I couldn't find a way around removing them.
A solution I've tried was overriding the uiGridGroupingService
, by providing a decorator for the groupingColumnBuilder, but the service is not resolved at all and I can't help but wonder if there is a simpler way of achieving this.
Is anyone aware of any solution for this problem?
The decorator approach is probably the best approach in this case. There are no config option to remove this from the column menu.
PS: The decorator is only shown to remove the aggregate items.
Here is a working plnkr with the decorator approach.
http://plnkr.co/edit/nzBeqbmEVUwmZF0qgyd6?p=preview
app.config(function($provide){
$provide.decorator('uiGridGroupingService', function ($delegate,i18nService,gridUtil) {
$delegate.groupingColumnBuilder = function (colDef, col, gridOptions) {
if (colDef.enableGrouping === false){
return;
}
if ( typeof(col.grouping) === 'undefined' && typeof(colDef.grouping) !== 'undefined') {
col.grouping = angular.copy(colDef.grouping);
} else if (typeof(col.grouping) === 'undefined'){
col.grouping = {};
}
if (typeof(col.grouping) !== 'undefined' && typeof(col.grouping.groupPriority) !== undefined && col.grouping.groupPriority >= 0){
col.suppressRemoveSort = true;
}
col.groupingSuppressAggregationText = colDef.groupingSuppressAggregationText === true;
var groupColumn = {
name: 'ui.grid.grouping.group',
title: i18nService.get().grouping.group,
icon: 'ui-grid-icon-indent-right',
shown: function () {
return typeof(this.context.col.grouping) === 'undefined' ||
typeof(this.context.col.grouping.groupPriority) === 'undefined' ||
this.context.col.grouping.groupPriority < 0;
},
action: function () {
service.groupColumn( this.context.col.grid, this.context.col );
}
};
var ungroupColumn = {
name: 'ui.grid.grouping.ungroup',
title: i18nService.get().grouping.ungroup,
icon: 'ui-grid-icon-indent-left',
shown: function () {
return typeof(this.context.col.grouping) !== 'undefined' &&
typeof(this.context.col.grouping.groupPriority) !== 'undefined' &&
this.context.col.grouping.groupPriority >= 0;
},
action: function () {
service.ungroupColumn( this.context.col.grid, this.context.col );
}
};
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.group')) {
col.menuItems.push(groupColumn);
}
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.ungroup')) {
col.menuItems.push(ungroupColumn);
}
}
return $delegate;
})
});
There is a suppress aggregation option! Set groupingShowAggregationMenu
to false.
It's set to true by default so you need to specify it in your columnDefs
groupingShowAggregationMenu: false