How to use custom modal to edit task details instead of predifined modal by syncfusion library?

I want to use custom modal i.e modal created by me to edit task details on click of task/subtask on gantt chart. Is there any simplest way to call custom modal to edit Task Information?

Attachment: editTaskInformationModal_8660093a.zip

1 Reply 1 reply marked as answer

MS Monisha Sivanthilingam Syncfusion Team April 8, 2021 12:30 PM UTC

Hi Ameya, 
 
Thank you for contacting Syncfusion support.. 
 
We have achieved your requirement by making use of the beforeOpenAddDialog and beforeOpenEditDialog request types in the actionBegin event. We have prevented the rendering of the default dialog by setting the args.cancel property to true. Also we can add a new record or edit an existing task by making use of the addRecord() and updateRecordByID() methods. The following code snippets demonstrate the solution. 
  
  
actionBegin(args: any): void {  
    if (args.requestType == "beforeOpenAddDialog" || args.requestType == "beforeOpenEditDialog") {  
      args.cancel = true;  
      let selecteddata = this.ganttObj.selectionModule.getSelectedRecords()[0];  
      const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {  
        width: "350px",  
        data: {name: selecteddata ? selecteddata.ganttProperties.taskName : this.name,  
        modalTitle: args.requestType == "beforeOpenAddDialog""New Task" "Task Information"  
       }  
      });  
     dialogRef.afterClosed().subscribe(result => {  
        if (result) {  
          if (args.requestType == "beforeOpenAddDialog") {  
            let data: object = { TaskName: result.name };  
            this.ganttObj.addRecord(data, "Top");  
          } else {  
            let id: number = selecteddata.ganttProperties.taskId;  
            let data: object = { TaskID: id, TaskName: result.name };  
            this.ganttObj.updateRecordByID(data);  
          }  
        }  
      });  
    }  
  }  
  
 
We have also prepared a sample for your reference. 
 
Please contact us if you require any further assistance. 
 
Regards,  
Monisha. 


Marked as answer
Loader.
Up arrow icon