Customization in Gantt Chart

[Surendra Maurya]

Hello,

1. I want to add custom controls in the Gantt chart edit, is it possible to add custom control like file upload and toggle on the edit of dialog which appears after we edit the task.

2. If no records are present and we try to add data on the click of add icon in the toolbar the dialog which appears is very small in size can you please help me how to fix the height of the dialog.

3.How to hide primary key textbox i.e TaskId on the edit of the dialog box.

Thanks.

[Gopinath Muniraj]

Hi Surendra, 

Thanks for contacting Syncfusion support. 

Please find the below response, 

Query 1: 

If no records are present, add dialog size becomes small. 

Solution: 

The reported problem has been already fixed in v18.1.53. Please upgrade your gantt packages to this version or higher than this version. 

 

Query 2: 

To hide the primary key column i.e., ID column in the dialog. 

Solution: 

We can customize the fields in the edit dialog  by using editDialogFields property. By using this property, we can achieve the solution using below code snippet, 

[app.component.html] 

<ejs-gantt [editDialogFields]="editDialogFields"></ejs-gantt> 

 

[app.component.ts] 

this.editDialogFields = [ 

           { type: 'General', headerText: 'General', fields: ['TaskName', 'StartDate', 'EndDate'] }, 

            { type: 'Custom', field : ['customControl']}, 

            { type: 'Dependency' } 

        ]; 

 

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

Query 3: 

Need to add custom controls in the Gantt chart edit, adding control like file upload and toggle on the dialog edit. 

Solution: 

We can add the custom controls like uploader in the custom tab using the edit template of specific column. Please check with this documentation link. 

We can achieve this using below code snippet, 

 

 

{ field: 'customControl', 

                edit: { 

                    create: () => { 

                        this.elem = document.createElement('input'); 

                        return this.elem; 

                    }, 

                    read: () => { 

                        return this.uploader; 

                    }, 

                    destroy: () => { 

                        this.uploader.destroy(); 

                    }, 

                    write: (args: Object) => { 

                        this.elem.type = 'file'                     

                        this.uploader = new Uploader(); 

                        this.uploader.appendTo(this.elem); 

                    } 

                }  

            } 

 

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

Please get in touch with us if you would require any further assistance. 

Thanks, 

Gopinath M 

[Surendra Maurya]

Thank you so much for your support

[Surendra Maurya]

Hello

I am facing the following issue kindly help

After using the file upload it's giving me an error as cannot read property insertbefore of null

Thank you.

[Gopinath Muniraj]

Hi Surendra, 

 

We have analyzed the reported issue in our given sample, but we didn’t face any console errors. Please share us code snippet or modified 

 given so that we can resolve this issue asap. 

  

Thanks, 

Gopinath M