Drag and drop task by row

[Sanu Khan]

Hi, 
I have tried adding  [allowRowDragAndDrop]='true' to my Gantt component but still, I m not able to drag and drop between rows in angular am I missing something PFB, my sample snippet.

component.html

<ejs-gantt #gantt id="LocalData" [dataSource]="data" [allowRowDragAndDrop]='true' [taskFields]="taskSettings" [projectStartDate]="projectStartDate"

    [projectEndDate]="projectEndDate">

component.ts

import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';

@Component({

  selector: 'app-ej-gannt-chart',

  templateUrl: './ej-gannt-chart.component.html',

  styleUrls: ['./ej-gannt-chart.component.scss']

})

export class EjGanntChartComponent implements OnInit {

  @Input()

  data: any;

  taskSettings: { id: string; name: string; startDate: string; endDate: string; duration: string; progress: string; dependency: string; child: string; };

  projectStartDate: Date;

  projectEndDate: Date;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {

    this.cdr.detectChanges();

    this.taskSettings = {

      id: 'TaskID',

      name: 'TaskName',

      startDate: 'StartDate',

      endDate: 'EndDate',

      duration: 'Duration',

      progress: 'Progress',

      dependency: 'Predecessor',

      child: 'subtasks'

    };

    this.projectStartDate = new Date('03/24/2019');

    this.projectEndDate = new Date('07/06/2019');

  }

}

I cannot find any drag and drop control only the parent task is getting collapsed 

[Monisha Sivanthilingam]

Hi Sanu, 

 

Greetings from Syncfusion support. 

 

We were able to replicate the issue you reported. We suspect that this issue occurs due to the required modules not being injected. You need to inject the RowDDService module in your sample to avoid this issue. The following code snippets demonstrate the solution. 

 

App.module.ts 

 

import { GanttModule } from "@syncfusion/ej2-angular-gantt"; 

import { RowDDService } from "@syncfusion/ej2-angular-gantt"; 

 

@NgModule({ 

  declarations: [AppComponent], 

  imports: [ 

    BrowserModule, 

    GanttModule, 

    DropDownListAllModule, 

    CheckBoxAllModule, 

    TextBoxAllModule, 

    NumericTextBoxAllModule, 

    MultiSelectAllModule, 

    DropDownListModule 

  ], 

  providers: [RowDDService], 

  bootstrap: [AppComponent] 

}) 

 

 

Sample: https://codesandbox.io/s/dank-sun-g498t?file=/src/app/app.module.ts 

 

Please refer our Online Documentation for more information on Online Documentation in Gantt. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Sanu Khan]

thanks, Monisha for your support it works but just to confirm is there any callback or on change event so that I can update the task to my API?

[Monisha Sivanthilingam]

Hi Sanu, 

 

You are welcome. 

 

We can make use of the rowDrop event to get the details of the record being moved, the position from which it was moved from and the position to which it was moved to. The following code snippets demonstrate the solution. 

 

App.component.html 

 

<ejs-gantt 

    id="DragAndDrop" 

    height="430px" 

    [dataSource]="data" 

    [taskFields]="taskSettings" 

    [allowRowDragAndDrop]="true" 

    [columns]="columns" 

    [labelSettings]="labelSettings" 

    [treeColumnIndex]="1" 

    [splitterSettings]="splitterSettings" 

    [selectionSettings]="selectionSettings" 

    [highlightWeekends]="true" 

    [projectStartDate]="projectStartDate" 

    [projectEndDate]="projectEndDate" 

    (rowDrop)="rowDrop($event)" 

> 

</ejs-gantt> 

 

 

App.component.ts 

 

public rowDrop(args: any) { 

  console.log(args); 

} 

 

 

Sample: https://codesandbox.io/s/dank-sun-g498t?file=/src/app/app.component.ts 

 

To learn more about Row Drag and Drop in Gantt Chart, please refer to our Online Documentation. 

 

Regards, 

Monisha. 

[Sanu Khan]

Thanks, Monisha, it works you can close this issue will get back if I need anything more.

I really appreciate your support

Thanks,

Sanu Khan 

[Monisha Sivanthilingam]

Hi Sanu, 

 

You are welcome. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.