Destroy Gantt Control

17 Jul 2018 / 1 minute to read

Gantt control is composed with more sub-controls like TreeGrid, Splitter, Dialog etc. So while destroying the Gantt control we need to
remove all sub-control elements and unbind all events bound by this control. By using destroy public method, we can properly remove the Gantt control from DOM.

The following code example explains how to destroy Gantt control.

  • html
    • <button id="buttonon" (click)="destroy($event, item)">Destroy Gantt</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>
  • javascript
    • import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html',
})
export class AppComponent {
    constructor() {
        //...
    }
    public destroy(event, item) {
        var obj = $("#GanttControl").ejGantt("instance");
        obj.destroy();
    }
}

    NOTE

    If you want to re-initialize Gantt control on same div element,
    we need to perform destroy action before re-initialize the Gantt.