SetScrollTop in Angular Gantt component
28 Sep 20233 minutes to read
In the Gantt component, you can set the vertical scroller position dynamically by clicking the custom button using the setScrollTop
method.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { editingData } from './data';
@Component({
selector: 'app-root',
template:
`<button ejs-button id='scrolltop' (click)='scroll()'>Set Scroll Top</button>
<br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
position: "50%"
};
}
scroll(): void {
this.ganttObj.ganttChartModule.scrollObject.setScrollTop(500);
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);