Collapse grouping when grid loads

[Bryan Smouse]

I have a kendo grid with grouping.  I would like the grouping to be collapsed when the page and grid is loaded for the first time, is there a setting on the grid that sets whether the grouping is expanded or collapsed?

Here is the grid definition:

<div style="text-align:center;">
  <div *ngIf="!fileList" class="spinner-grow" role="status" style="display:inline-block;">
    <span class="sr-only">Loading...</span>
  </div>
</div>
<kendo-grid *ngIf="fileList"
            [data]="gridView"
            [sort]="gridState.sort"
            [skip]="gridState.skip"
            [sortable]="{ allowUnsort: true, mode: 'single'}"
            [pageable]="pagerSettings && gridView.data.length > 0"
            [pageSize]="gridState.take"
            [group]="gridState.group"
            [filter]="gridState.filter"
            [filterable]="true"
            [resizable]="true"
            (dataStateChange)="dataStateChange($event)">
  <kendo-grid-column field="facilityId" title="Facility ID" width="120">
    <ng-template kendoGridGroupHeaderTemplate
                 let-group="group"
                 let-field="facilityId"
                 let-value="value"
                 let-aggregates="group.aggregates">
      <div class="row" style="width: 100%">
        <div class="col-md-3"><a [href]="aggregates['facilityLoginListUrl'].max" target="_blank" class="grid-link">{{value}}</a></div>
        <div class="col-md-2 offset-md-5" style="text-align: right;">Total $ amount: {{aggregates["claimAmount"].sum | currency}}</div>
        <div class="col-md-2 offset-md-7" style="text-align: right;">Total # of files: {{aggregates["facilityId"].count}}</div>
      </div>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      <a [href]="dataItem.facilityLoginListUrl" target="_blank" class="grid-link">{{dataItem.facilityId}}</a>
    </ng-template>
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="organizationId" title="Organization ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="submitterId" title="Submitter ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      <a [href]="dataItem.submitterLoginEditUrl" target="_blank" class="grid-link">{{dataItem.submitterId}}</a>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="description" title="Description">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="fileName" title="File Name">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="macName" title="MAC Name" width="150">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="loginId" title="Login ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="dateInvalidated" title="Date/Time Invalidated" filter="date" format="{0:d}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq" [showOperators]="false"></kendo-grid-date-filter-cell>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

 

Here is the typescript:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { GridDataResult, PagerSettings } from '@progress/kendo-angular-grid';
import { Subject, Observable } from 'rxjs';
import { State, process, GroupDescriptor } from '@progress/kendo-data-query';
import { FileInfo } from '../../../models/file-info-item';
import { Configuration } from '../../../app.constants';
import { FileMonitorFilter } from '../../../models/file-monitor-filter';
import { MonitorService } from '../../../core/services/monitor-service';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-invalid-file-grid',
  templateUrl: './invalid-file-grid.component.html'
})
export class InvalidFileGridComponent implements OnInit, OnDestroy {
  public fileList: FileInfo[];
  public gridView: GridDataResult;
  public pagerSettings: PagerSettings;
  public fileMonitorFilter: Observable<FileMonitorFilter>;
  public skip = 0;
  public pageSize = 10;
  public aggregates: any[] = [
    { field: 'claimAmount', aggregate: 'sum' },
    { field: 'facilityId', aggregate: 'count' },
    { field: 'facilityLoginListUrl', aggregate: 'max'} // egregious hack to get value into group header
  ];

  public groups: GroupDescriptor[] = [{ field: 'facilityId', aggregates: this.aggregates }];
  public gridState: State = {
    skip: 0,
    take: 10,
    sort: [{
      field: 'facilityId',
      dir: 'desc'
    }],
    group: this.groups
  };

  private componentDestroyed: Subject<any> = new Subject();

  constructor(private configuration: Configuration,
    private monitorService: MonitorService) {
  }

  ngOnInit(): void {
    this.pagerSettings = this.configuration.DefaultPagerSettings;
    this.loadFileList();
  }

  ngOnDestroy(): void {
    this.componentDestroyed.next();
    this.componentDestroyed.unsubscribe();
  }

  public dataStateChange(state: State): void {
    this.gridState = state;
    this.loadGrid();
  }

  private loadFileList(): void {
    this.fileList = null;
    const filter = new FileMonitorFilter();
    this.monitorService.getInvalidFiles(filter)
      .pipe(takeUntil(this.componentDestroyed))
      .subscribe(data => {
        if (data) {
          this.fileList = data;
          this.gridState.skip = 0;
          this.loadGrid();
        }
      });
  }

  loadGrid(): void {
    this.gridView = process(this.fileList, this.gridState);
  }

}

[Dimiter Topalov]

Hi Bryan,

Indeed, the grouped Grids are expanded by default, and there is no built-in option to control this behavior. However, you can use the Grid collapseGroup method to collapse each group row programmatically after the Grid is rendered (for example in the ngOnInit / ngAfterViewInit life cycle hook or when the data arrives from the server), e.g.:

https://stackblitz.com/edit/angular-tpetae?file=app/app.component.ts

I hope this helps.

If you have the time, you can also support the following feature request for a method that will collapse all groups instead of having to iterate over each row:

https://feedback.telerik.com/kendo-angular-ui/1400065-grid-group-collapsegroup

Regards,
Dimiter Topalov
Progress Telerik

[Joshua]

Has this been implemented yet and will it be implemented for JQuery? 

[T. Tsonev]

Hi Joshua,

This is not implemented for the Angular Grid yet. That said, we intend to address this feature by following the same approach as for the detail rows. The initial state can be readily controlled by defining an isGroupExpanded callback (not a real API at this point). There's no time frame set yet.

For the jQuery grid, see Collapse Groups in Grid by Default.

Best Regards,
T. Tsonev
Progress Telerik

[Joshua]

Thanks for the followup. I have been going back and forth with support about the article you linked to. Its not an option with anything using a non-trivial amount of data, because it rebinds the grid for every group you collapse.

 

https://dojo.telerik.com/ayEcAWiX

 

 

[Dimiter Topalov]

Hi Joshua,

Indeed, the approach seen in the Kendo UI for jQuery demo relies on looping through all rendered groups and collapsing them similar to the current available Kendo UI for Angular solution, outlined in our first response in this thread.

If you have further questions about the Grid collapsing and potential future plans for improvement in the Kendo UI for jQuery suite, please open a separate ticket, choosing the respective product - Kendo UI for jQuery - Grid. This will ensure that the ticket will be handled by the team responsible for developing and supporting this product, and you will receive the most comprehensive response.

As far as the Kendo UI for Angular Grid is concerned, the planned enhancement for introducing a Grid Grouping service that will handle the expanded and collapsed state of each group similar to the Master-Detail scenario my colleague mentioned, should resolve the problem - the developer will be in control to determine which groups will be collapsed and which - expanded at any time, and the Grid will be rendered only once with the correct configuration.

Meanwhile choosing an appropriate page size can potentially mitigate any performance issues, arising from collapsing each group individually (in the Kendo UI for Angular Grid).

Regards,
Dimiter Topalov
Progress Telerik