import { NgModule, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {
  TreeGridModule,
  TreeGridComponent,
} from '@syncfusion/ej2-angular-treegrid';
import {
  PageService,
  SortService,
  FilterService,
} from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({

  providers: [PageService, SortService, FilterService],
  standalone: false,
  selector: 'app-root',
  template: `
  <div style="margin-top: 200px;">
      <button (click)="expandAll()">ExpandAll</button>
      <button (click)="treeGrid.collapseAll()">CollapseAll</button>

    <ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks'
       [enableCollapseAll]="true"

                [allowPaging]="false" [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                </e-columns>
                </ejs-treegrid></div>`,
})
export class AppComponent implements OnInit {
  @ViewChild(TreeGridComponent) treeGrid!: TreeGridComponent;

  public data?: Object[];
  public pageSettings?: PageSettingsModel;

  ngOnInit(): void {
    this.data = sampleData;
    this.pageSettings = { pageSize: 6 };
  }

  expandAll(): void {
    this.treeGrid.grid.showMaskRow();
    setTimeout(() => {
      this.treeGrid.expandAll();
      this.treeGrid.grid.removeMaskRow();
    }, 5000);
  }
}
