Kendo UI Angular 2 - Grid All Groups Collapsed by Default

Question

I'm beginning to use the new Kendo UI for Angular 2 Grid and I was wondering if it is possible, when grouping data, to have all the groups collapsed by default?

I can see there appears to be a method available collapseGroup() but it is unclear how to use this nor if there is just an option to have all groups collapsed by default.

Update As requested, here is my current grid setup. There is currently only a single groupby but this will change to potentially five group levels.

@Component({
selector: "sector-treegrid",
template: `
    <ccyPicker></ccyPicker>
    <kendo-grid *ngIf="data.length > 0"
        [data]="gridData"
        [skip]="state.skip"
        [pageSize]="state.take"
        [pageable]="true"
        [scrollable]="'scrollable'"
        [height]="680"
        [group]="state.group"
        [sortable]="false"
        [groupable]="false"
        [selectable]="true"
        (dataStateChange)="dataStateChange($event)"
    >
    <kendo-grid-column field="AssetId" title="Asset ID" [width]="120">
        <template kendoGridGroupHeaderTemplatе>
        </template>
    </kendo-grid-column>
    <kendo-grid-column field="Description" title="Description" [width]="230"></kendo-grid-column>
    <kendo-grid-column field="Nominal" title="Nominal" [width]="230">
        <template kendoGridCellTemplate let-dataItem>
          {{dataItem.Nominal | number:'1.0-0'}}
        </template>
        <template 
            kendoGridGroupFooterTemplate 
                let-group="group" 
                let-aggregates>{{aggregates["Nominal"].sum | number:'1.0-0'}}</template>
        <template 
            kendoGridFooterTemplate 
                let-column="column">Total {{column.title}}: {{total["Nominal"].sum | number:'1.0-0'}}</template>
    </kendo-grid-column>
`
})

export class SectorTreeGridComponent implements OnChanges {

    @Input() data: Constituent[] = [];

    private gridData: GridDataResult;
    private total: any;

    selectedItem: Constituent;
    popupVisible: boolean = false;

    private aggregates: any[] = [{ field: 'Nominal', aggregate: 'sum' }];

    private state: State = {
        skip: 0,
        take: 500,
        group: [{ field: 'Level2', aggregates: this.aggregates }]
    };

    ngOnChanges(changes: SimpleChanges) {  
        if (changes.data.currentValue.length > 0) {
            if (this.data.length > 0) {
                this.gridData = process(this.data, this.state);
                this.total = aggregateBy(this.data, this.aggregates);
            }
        }
    }

    protected dataStateChange(state: DataStateChangeEvent): void {
        state.group.map(
            group => group.aggregates = this.aggregates);

        this.state = state;

        this.gridData = process(this.data, this.state);
    }
}

Answer 1

Just call this function with grid instance and data used in grid. It will work with paging as well (where main id's do shift).

collapseAll(grid: GridComponent, items: any[], parentIdentificator: string = undefined, level: number = 1)
{
    const self = this;

    items.forEach((item, index) => {

        let fixedIndex = level == 1 ? index + grid.skip : index;
        let identificator = parentIdentificator ? (parentIdentificator + "_" + fixedIndex.toString()) : fixedIndex.toString();

        let isAggregate = item["aggregates"] && item["field"] && item["items"];

        if (isAggregate) {
            self.collapseAll(grid, item["items"], identificator);
            grid.collapseGroup(identificator);
        }

    });
}

Answer 2

+1 to mast3rd3mon for the base code. (this.programs is my data array applied to the grid) You can determine how many times to iterate over the top level groups by calculating what rows are possibly there by adding the take and skip variables. This will make sure it collapses everything visible on the screen, but it is still imprecise as it will fire beyond what it needs to. (it does not cause an error though) If there are less rows available to collapse you can calculate the number of times you should loop as shown below.

    pageChange(event: PageChangeEvent): void {
        this.state.skip = event.skip;
        this.loadPrograms();
    }
    private loadPrograms(): void {
        this.gridView = process(this.programs, this.state);
        // collapse grid grouping
        let rowCount = this.programs.length;
        let visibleCount = this.state.skip+this.state.take;
        let stopNumber = visibleCount;
        if (rowCount < visibleCount) {
            stopNumber = rowCount;
        }
        for (let m = this.state.skip; m < stopNumber; m = m + 1) {
            this.grid.collapseGroup(m.toString());
        }
    }

This doesn't solve your recursive problem. As far as I can tell, there isn't any property of the grid in the documentation that tells you if there are child groups or how many groups are currently visible etc. You can determine how deep of a recursion you need to do by how many groups are applied to the grid however.

this.grid.group.length

Answer 3

Going by your code, you only have 1 level of GroupHeaders

Use this import:

import { GridComponent } from '@progress/kendo-angular-grid';

Then this code will close the first 5 top level headers:

@ViewChild(GridComponent) grid: GridComponent;
close() {
    for (let m = 0; m < 5; m = m + 1) {
        this.grid.collapseGroup(m.toString());
    }
}