RowDD and Edit modules.

[Doss Med Aziz]

Hi 

I want to active  drag and drop feature , so i followed the documentation , but its does't work ,

i find that i need to inject RowDD and Edit modules. but there is no exemple to inject these two modules please help to find a way to install them ( with simple exemple please ) and thanks 

[Monisha Sivanthilingam]

Hi Doss, 

 

Greetings from Syncfusion support. 

 

You can import the RowDD and Edit modules in the app.module.ts file. You have to import them from the @syncfusion/ej2-angular-gantt and inject them providers section in the app.module.ts file. The following code snippets demonstrate the solution. 

 

App.module.ts 

import { MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns'; 

 

import { TextBoxAllModule, NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs'; 

 

import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'; 

 

import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons'; 

 

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

 

import { RowDDService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'; 

 

import { HttpModule } from '@angular/http'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import { RouterModule } from '@angular/router'; 

import { CommonModule } from '@angular/common'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { NgModule } from '@angular/core'; 

 

import { AppComponent } from '../app.component'; 

 

@NgModule({ 

declarations: [ AppComponent ], 

imports: [ BrowserModule, GanttModule, DropDownListAllModule, CheckBoxAllModule, TextBoxAllModule, NumericTextBoxAllModule, MultiSelectAllModule], 

providers: [RowDDService, EditService, SelectionService], 

bootstrap: [AppComponent] 

}) 

export class AppModule { } 

 

 

We have also prepared a sample for your reference.                                   

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Doss Med Aziz]

thanks it work, finally ,

when i drag a row and drop him in another position how can i detecte the new updates of this row , there is an event that can open this problem and thanks again

[Monisha Sivanthilingam]

Hi Doss, 

 

You are welcome. 

 

You can make use of the rowDrop event to get the information about the dropped position. The following code snippets demonstrate the solution. 

 

App.component.ts 

 

public rowDrop(args: any) { 

    console.log(args); 

  } 

 

 

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> 

 

 

We have also prepared a sample for your reference. 

 

To learn more about drag and drop in Gantt Chart, please refer our Online Documentation and Sample. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Doss Med Aziz]

Big thanks to this support team , 

I appreciate all of your helps 

[Preethi Nesakkan Gnanadurai]

Hi Doss, 

  

Most welcome. 

  

Regards, 

Preethi