custom date field in gantt chart with inline editing

[Mukarram Ali]

In gantt chart Inline editing, how to add custom Date field that should be exactly same as default Startdate and Enddate with calender picker.

[Lokesh Arjunan]

Hi Mukarram Ali

Greetings from Syncfusion Support.

We have validated your query and you can able to add custom date field using editTemplate. We have attached code snippet and sample for your reference.

Code Snippet:

edit: {

          create: () => {

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

            return this.elem;

          },

          read: () => {

            return this.dropdownlistObj.value;

          },

          destroy: () => {

            this.dropdownlistObj.destroy();

          },

          write: (args: Object) => {

            this.dropdownlistObj = new DatePicker({

              value: args.rowData.CustomColumn,

            });

            this.dropdownlistObj.appendTo(this.elem);

          },

        },

Sample: https://stackblitz.com/edit/angular-nd2qkt?file=app.component.ts,app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/task-bar-editing/#cell-edit-template

Regards,

Lokesh