How to perform crud actions in gantt chart using angular

[Pham Van Duoc]

Hi. I would like to know how to perform crud actions in gantt chart using angular.

Thanks in advance.

[Logeswari Gopalakrishnan]

Hi Pham, 

 

In Gantt, by using DataManager support, we can update the data source of Gantt control on CRUD actions. We can define data source for Gantt as instance of DataManager and by using batchUrl property of DataManager we can update the data source on CRUD operation. We have prepared a sample to save the edited row data in server side by using UrlAdaptor. 

 

Please find the below UG link for CRUD actions. 

 

UG link: https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/#maintaining-data-in-server 

 

Please let us know, if you need further details on this. 

 

Regards, 

Logeswari G 

[Pham Van Duoc]

Can I use My dialog to perform CRUD actions? Because your dialog is difficult to use

Example:

[Logeswari Gopalakrishnan]

Hi Pham, 

 

While click save button on Add dialog , by default actionBegin with requestType beforeAdd and actionComplete with requestType add events will triggered. Please find the below code snippet. 

 

[app.component.html] 

 

<ejs-gantt id="ganttDefault" 

           .. //// 

           (actionComplete)="onActionComplete($event)" (actionBegin)="onActionBegin($event)"> 

</ejs-gantt> 

 

[app.component.ts] 

 

export class AppComponent { 

    ..//// 

    public ngOnInit(): void { 

        this.data = editingData; 

..///// 

    } 

     public onActionComplete(args: any): void { 

        if (args.action == "add" && args.requestType == "add") { 

          console.log("Triggerd action complete event"); 

        } 

    } 

    public onActionBegin(args: any): void { 

        if (args.action == "beforeAdd" && args.requestType == "beforeAdd") { 

          console.log("Triggerd action begin event"); 

        } 

    } 

} 

 

Please find the below sample link. 

 

Sample link: https://stackblitz.com/edit/angular-czbnaw?file=app.component.ts 

 

Please confirm with us you can achieve your requirement with these events or explain your requirement in detail. It will more helpful to achieve you requirement asap. 

 

Regards, 

Logeswari G 

[Pham Van Duoc]

I want to enter form data (Ex: <input > tag in template) and then send to server-side with HTTP methods such as PUT, POST, and DELETE. Please help me, thank you!

[Logeswari Gopalakrishnan]

Hi Pham, 

 

We can achieve your requirement, by using toolbarClick event. By using toolbarClick event, we can cancel the default add dialog by setting args.cancel as true and  can render custom dialog by using show method of dialog control. And on button click action, we can add the record by using addRecord method of Gantt control. Please find the below code example. 

 

[app.component.html] 

 

//Render gantt 

<ejs-gantt id="contextMenu" #gantt  

…// 

(toolbarClick)="toolbarClick($event)"> 

  </ejs-gantt> 

// Render Dialog 

  <ejs-dialog id="editdialog" #editdialog width="700px" isModal='true' header='Add Custom Dialog' [buttons]='buttons' [visible]='visible'[animationSettings]='animationSettings'> 

   <ng-template #content> 

              <ejs-textbox id="taskname" #taskname placeholder="Task Name" width="300px"></ejs-textbox> 

    </ng-template> 

</ejs-dialog> 

 

[app.component.ts] 

 

export class AppComponent { 

    ….//// 

   // Trigger when ok button click 

    public okButton: EmitType<object> = () => { 

      var tasknameObj = (document.getElementById("taskname") as any).ej2_instances[0]; 

       let record: object = { 

            TaskName: tasknameObj.value, 

            }; 

      this.gantt.addRecord(record);  // Add record using public method 

      tasknameObj.value = ""; 

      this.editdialog.hide(); 

    } 

    public cancelButton: EmitType<object> = () => { 

      this.editdialog.hide(); 

    } 

    public visible: Boolean = false; 

public animationSettings: Object = { effect: 'None' }; 

…//// 

    public ngOnInit(): void { 

        this.data = new DataManager({ 

            url: 'https://localhost:44379/Home/UrlDatasource', 

            adaptor: new UrlAdaptor, 

            batchUrl: 'https://localhost:44379/Home/BatchUpdate' 

        }); 

        …..//// 

    } 

    public toolbarClick(args: any) { 

        if (args.item.text == "Add") { 

          args.cancel = true;   // Cancel default add dialog 

         

            this.renderDialog(); // Render custom dialog 

        } 

    } 

    public buttons: Object = [ 

    { 

      'click': this.okButton.bind(this), 

        buttonModel:{ 

        content: 'OK', 

        isPrimary: true 

      } 

    }, 

    { 

      'click': this.cancelButton.bind(this), 

      buttonModel: { 

        content: 'Cancel' 

      } 

    } 

  ] 

  public renderDialog() { 

      this.editdialog.show(); 

       

  } 

} 

 

//server side 

[HomeController.cs] 

 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            if (DataList == null) 

            { 

                ProjectData datasource = new ProjectData(); 

                DataList = datasource.GetUrlDataSource(); 

            } 

            var count = DataList.Count(); 

            return dm.RequiresCounts ? Json(new { result = DataList, count = count }) : Json(DataList); 

        } 

 

public IActionResult BatchUpdate([FromBody]CRUDModel batchmodel) 

        { 

….////             

 

if (batchmodel.Added != null) 

            { 

                for (var i = 0; i < batchmodel.Added.Count(); i++) 

                { 

                    DataList.Insert(0,batchmodel.Added[i]);                  

                } 

            } 

            return Json(new { addedRecords = batchmodel.Added, changedRecords = batchmodel.Changed, deletedRecords = batchmodel.Deleted }); 

        } 

 

We have prepared sample for you reference. Please find the below sample link. 

 

Back end sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataManager-1232863855 

 

Front end sample: https://stackblitz.com/edit/angular-znmab6-5zupoh?file=app.component.ts 

 

Note: In Gantt all CRUD actions are performed as batch save, because when we edit any child task, then it’s parent task and tasks which has link with edited tasks are updated. So we use batch save option to reduce the server request for each updated data. So we recommend you to use URL adaptor to update on crud operations instead of using post, put, delete methods separately. 

 

Please let us know, if you need further details on this. 

 

Regards, 

Logeswari G