Collapse grouping when grid loads

6 posts, 0 answers
  1. Bryan Smouse
    Bryan Smouse avatar
    20 posts
    Member since:
    Nov 2005

    Posted 19 Aug 2019 Link to this post

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

    }

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 21 Aug 2019 Link to this post

    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 ngOnInitngAfterViewInit 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
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

  3. Joshua
    Joshua avatar
    82 posts
    Member since:
    May 2012

    Posted 16 Apr in reply to Dimiter Topalov Link to this post

    Has this been implemented yet and will it be implemented for JQuery? 
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2830 posts

    Posted 20 Apr Link to this post

    Hi ,

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Joshua
    Joshua avatar
    82 posts
    Member since:
    May 2012

    Posted 20 Apr in reply to T. Tsonev Link to this post

    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

     

     

  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 22 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top