angular-slickgrid hide total rows when grouping

Question

I'm using grouping with a sum aggregator to get it to work, but I don't actually care about the sums or any other info, I'm just interested in the grouping. It's working fine but I'm getting an empty total row per group, which does not look great. Is there a way to get rid of it ?

Looking here it seems like the solution is to pass displayTotalsRow: false to the dataView constructor, is that a possibility with angular-slickgrid ?

Thanks

No that flag is not available in Angular-Slickgrid, you can submit a PR, you can modify this line to add your the displayTotalsRow?: boolean and modify this line to use it new Slick.Data.DataView({ displayTotalsRow: this.gridOptions.dataView.displayTotalsRow, ... — ghiscoding
So I was about to look at adding this in Angular-Slickgrid and found out that the answer you looked at is completely wrong, the displayTotalsRow is a flag that exist in the Group Info as seen on this line and so this is already available in Angular-Slickgrid grouping: { getter: 'title', displayTotalsRow: false, aggregators: [...], ... } — ghiscoding

ghiscoding ghiscoding · Accepted Answer · 2020-08-03T14:58:14

The SO answer you referenced in your question is wrong, the displayTotalsRow is not a flag that exist on the DataView but is instead a flag that exist in the Group Info (grouping) as seen on this line of the DataView (slick.dataview.js) and this is already available in Angular-Slickgrid grouping: { getter: 'title', displayTotalsRow: false, aggregators: [...], ... }

groupByDuration() {
    this.dataviewObj.setGrouping({
      getter: 'duration',
      formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
      aggregators: [
        new Aggregators.Avg('percentComplete'),
        new Aggregators.Sum('cost')
      ],
      comparer: (a, b) => Sorters.numeric(a.value, b.value, SortDirectionNumber.asc),
      aggregateCollapsed: false,
      lazyTotalsCalculation: true,
      displayTotalsRow: false, // <<-- HERE is the flag you want to use
    } as Grouping);

    // you need to manually add the sort icon(s) in UI
    this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
    this.gridObj.invalidate(); // invalidate all rows and re-render
  }

or with Draggable Grouping

initializeGrid {
  this.columnDefinitions = [
      {
        id: 'title', name: 'Title', field: 'title',
        width: 70, minWidth: 50,
        cssClass: 'cell-title',
        filterable: true,
        sortable: true,
        grouping: {
          getter: 'title',
          formatter: (g) => `Title: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
          aggregators: [
            new Aggregators.Sum('cost')
          ],
          displayTotalsRow: false, // <<-- HERE is the flag you want to use
          aggregateCollapsed: false,
          collapsed: false
        }
      },
  ];
}

Grouping Interface

The Angular-Slickgrid TypeScript interface with all the possible flags/options can be seen here

DataView

For further reference, and to prove that the flag isn't a valid DataView option, if you just look at the top of the slick.dataview.js file, you'll see right away in the class definition that there's only 2 available flags as acceptable DataView options (the defaults variable shown below). So taking a look at the internal does help sometimes.

  function DataView(options) {
    var self = this;

    var defaults = {
      groupItemMetadataProvider: null,
      inlineFilters: false
    };
// ...

angular-slickgrid hide total rows when grouping

1 Answers

Grouping Interface

DataView