Как программно свернуть сгруппированный кендо Grid- angular 8? - PullRequest
Новая
       45

Как программно свернуть сгруппированный кендо Grid- angular 8?

0 голосов
/ 27 сентября 2019

У меня есть следующее приложение Kendo Grid в приложении angular 8, в котором я реализовал группировку.Сетка по умолчанию отображается с развернутыми всеми группами.

Как программно свернуть все группы, чтобы после инициализации результат был похож на следующее изображение?

enter image description here

Ниже мой код: 

<kendo-grid (dataStateChange)="dataStateChangeResources($event)"
              *ngIf="gridViewResources"
              [data]="gridViewResources"
              [group]="stateResources.group"
              [groupable]="{ showFooter: true }"
              [pageSize]="stateResources.take"
              [pageable]="true"
              [skip]="stateResources.skip"
              [sort]="stateResources.sort"
              [sortable]="{ mode: 'multiple' }"
  >

    <kendo-grid-column [width]="100" field="type" title="Type"></kendo-grid-column>
    <kendo-grid-column [width]="100" field="item" title="Item"></kendo-grid-column>
    <kendo-grid-column [width]="100" field="shift" title="Shift"></kendo-grid-column>
    <kendo-grid-column [width]="100" field="plannedCost" title="Planned Cost">
      <ng-template kendoGridGroupHeaderColumnTemplate let-aggregates="aggregates" let-group="group">
        <span title="Planned Qty">
             {{ numberWithCommas(aggregates.plannedCost.sum) }}
        </span>
      </ng-template>
      <ng-template kendoGridGroupFooterTemplate let-aggregates let-group="group">
        <span title="Planned Qty">
             {{ numberWithCommas(aggregates.plannedCost.sum) }}
        </span>
      </ng-template>
      <ng-template kendoGridFooterTemplate>
        TOTAL = {{numberWithCommas(sumResourcesPlannedQty)}}
      </ng-template>
    </kendo-grid-column>
</kendo-grid>

Код TS: 

import {Component, OnInit} from '@angular/core';
import {PlanningService} from '../../services/planning.service';
import {SeriesLabels} from '@progress/kendo-angular-charts';
import {aggregateBy, DataResult, process, State} from '@progress/kendo-data-query';
import {DataStateChangeEvent} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-planning-dashboard',
  templateUrl: './planning-dashboard.component.html',
  styleUrls: ['./planning-dashboard.component.css']
})


export class PlanningDashboardComponent implements OnInit {
  gridDataResources: any[];
  public seriesLabels: SeriesLabels = {
    visible: true,
    padding: 3,
    font: 'bold 14px Arial, sans-serif'
  };
  public gridViewResources: DataResult;

  public aggregatesResources: any[] = [{field: 'plannedCost', aggregate: 'sum'}, {field: 'actualCost', aggregate: 'sum'}];
  public stateResources: State = {
    skip: 0,
    take: 15,
    group: [{field: 'type', aggregates: this.aggregatesResources}]
  };

  constructor(private service: PlanningService) {}
  
  ngOnInit() {
    this.getAllResources(9269);
  }

  getAllResources(workOrderId: number) {
    this.service.getAllResources(workOrderId).subscribe(
      response => {
        this.gridDataResources = response;
        this.loadDataResources();
      }
    );
  }

  public dataStateChangeResources(state: DataStateChangeEvent): void {
    if (state && state.group) {
      state.group.map(group => group.aggregates = this.aggregatesResources);
    }
    this.stateResources = state;
    this.gridViewResources = process(this.gridDataResources, this.stateResources);
  }

  numberWithCommas(x) {
    return x.toLocaleString('en', {useGrouping: true});
  }

  private loadDataResources(): void {
    this.gridViewResources = process(this.gridDataResources, {group: this.stateResources.group});

  }

  public get sumResourcesPlannedQty() {
    const aggregateResult = aggregateBy(this.gridDataResources, [{aggregate: 'sum', field: 'plannedCost'}]);
    if (this.gridDataResources.length > 0) {
      return aggregateResult.plannedCost.sum;
    }
    return 0;
  }

}

Я безуспешно искал варианты поиска.Я хотел бы знать, как я могу сделать это программно, чтобы моя сетка изначально отображалась свернутой.

1 Ответ

0 голосов
/ 27 сентября 2019

Попробуйте: 

let i = 0;

this.grid.collapseGroup(i.toString());

Здесь i - позиция строки.

...