Remove aggregation menu items from angularjs ui-grid menu

Question

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?

Elberfeld

The only thing i'm aware of is that ui-grid is not really flexible atm. I used it and i tried to figure how to add the function "pin left" without the "pin right" showing (asked by my client)... and there is no way to do this. I'm pretty sure this is the same for your problem. You should post an issue @ their github. – Sudatorium

Answer 1

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;
    })
});

Nonnah

Thank you, Kathir! This is a very nice starting point. Unfortunately, it seems that the grouping menu item functionality no longer works, because it cannot resolve who "service" is. Do you know of a way of injecting it? – Elberfeld

Oh, it was as simple as changing the service reference to $delegate, which makes sense since that is the instance we are decorating. Seems to be working nicely now: plnkr.co/edit/WuCceTIhavdgVTYuer8R?p=preview :) – Elberfeld

Answer 2

It's set to true by default so you need to specify it in your columnDefs

groupingShowAggregationMenu: false

Subcontraoctave

This worked for me. Placed it on each columnDef that I needed it on. Thanks! – Anabelanabella

This was a great, clean solution. Remember this is not a grid setting but rather a columnDef setting. You have to put this on every column. – Commensurate

Answer 3

There is a suppress aggregation option! Set groupingShowAggregationMenu to false.

Sorgo

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Brainstorm

@bitoiu: Not so; the answer gave enough information to fairly easily discern, without a functional URL, what to do, so it's not link-only. – Haematogenous

I'm glad with that, but if the link gets offline this is a useless answer as per my comment. It's still a URL only answer. – Brainstorm