Custom control in gantt chart

[Surendra Maurya]

Hello,

1.we have custom controls that are created using material components and it has separate component files for each control so is it possible to add those control inside Gantt chart dialog box ??

2. Is it possible to open custom dialog i.e material dialog box on add and edit of Gantt chart??

Thank you.

[Gopinath Muniraj]

Hi Surendra, 

Thanks for contacting Syncfusion support. 

Please find the below response. 

  

Query 1: we have custom controls that are created using material components and it has separate component files for each control so is it possible to add those control inside Gantt chart dialog box? 

Comments: Please let us know what kind of material component you are trying to render in the Gantt chart dialog box, whether it is a Syncfusion component else which component you required to render in dialog. It will helpful for us to proceed further. 

  

Query 2: Is it possible to open custom dialog i.e material dialog box on add and edit of Gantt chart?? 

Comments: 

We achieved this solution using some workaround. Please find the below code snippet, 

app.component.ts 

public toolbarClick(args: any) { 

        if (args.item.id === this.gantt.element.id+"_edit") { 

          args.cancel = true; 

        // you can initialize and show your custom edit dialog here 

            if(this.gantt.selectedRowIndex != -1) { 

                this.rowData = this.gantt.currentViewData[this.gantt.selectedRowIndex]; 

            } 

            this.renderDialog(this.rowData); 

        } 

       // you can initialize and show your custom add dialog here 

        if (args.item.id === this.gantt.element.id+"_add") { 

          args.cancel = true; 

          this.renderAddDialog(); 

        } 

    } 

  

public actionBegin(args: any) { 

        if (args.requestType == 'beforeOpenEditDialog') { 

          args.cancel = true; 

        // you can initialize and show your custom dialog here 

            if(this.gantt.selectedRowIndex != -1) { 

                this.rowData = this.gantt.currentViewData[this.gantt.selectedRowIndex]; 

            } 

            this.renderDialog(this.rowData); 

        } 

       // you can initialize and show your custom add dialog here 

        else if (args.requestType == 'beforeOpenAddDialog') { 

          args.cancel = true; 

          this.renderAddDialog(); 

        } 

    } 

  

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

      var tasknameObj = document.getElementById("taskname") ; 

      this.gantt.updateRecordByID({TaskID:this.rowData.TaskID, TaskName:tasknameObj.value}); 

      this.editdialog.hide(); 

    } 

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

      this.editdialog.hide(); 

    } 

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

      debugger; 

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

      let obj: any = document.getElementById('contextMenu').ej2_instances[0]; 

      let currentId: any = (parseInt(obj.ids[obj.ids.length-1])+1).toString(); 

      let record: object = { 

            TaskName: tasknameObj.value, 

            TaskID: currentId 

      }; 

      this.gantt.addRecord(record); 

      tasknameObj.value = ""; 

      this.adddialog.hide(); 

    } 

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

      this.adddialog.hide(); 

    } 

  

We added form component in edit dialog and textbox component in add dialog in the following sample. Please refer the following sample. 

Sample: https://stackblitz.com/edit/angular-znmab6-b63vs1?file=app.component.html 

Please revert us if you need any further assistance on this. 

Thanks, 

Gopinath M 

[Surendra Maurya]

Thank you so much for your help

We have custom control like for getting employees list with their details like employee photo, position, etc and this control is made using separate ts and cshtml file so is it possible to add such control which is not part of syncfusion control but we want to add it inside the Gantt chart??

Thank you.

[Logeswari Gopalakrishnan]

Hi Surendra, 

  

We have rendered resources of the task as list within the edit dialog without use of sycfusion controls.  Please find the below code snippet. 

  

[app.component.ts] 

 

public renderDialog(data) { 

    this.editdialog.show(); 

    var customObj = (document.getElementById("custom") as any); 

    customObj.innerHTML = ""; 

    var liElement; 

    var t; 

    for (var a = 0; a < data.ganttProperties.resourceInfo.length; a++) { 

        // Create li element for each resource and append 

        liElement = document.createElement("LI"); 

        t = document.createTextNode(data.ganttProperties.resourceInfo[a].resourceName); 

        liElement.appendChild(t); 

        customObj.appendChild(liElement); 

    } 

} 

 

[app.component.html] 

 

    < ejs - dialog id = "editdialog" #editdialog > 

        <ng-template #content> 

            ….///// 

        <ul id="custom"></ul> 

</ng - template > 

            </ejs - dialog > 

 

  

We have prepared sample for your reference. Please find it from below link. 

  

Sample link: https://stackblitz.com/edit/addanothercontrol?file=app.component.html 

  

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

  

Regards, 

Logeswari G 

[Surendra Maurya]

Hello sorry for the late reply

Solutions provided by your team helped me a lot thank you so much your quick response

Regards,

Surendra

[Monisha Sivanthilingam]

Hi Surendra, 

 

You are welcome. 

 

We are glad to know that the provided solutions worked for you. Please contact us if you require any further assistance. 

 

Regards, 

Monisha.