onchange event in dropdown

[Surendra Maurya]

Hello,

I am using the following code for adding dropdown in the Gantt chart and I want to add on change event so that depending upon the value selected from the dropdown further action can be performed.

kindly help with this

 this.columns = [      

           {field: 'TaskName', headerText: 'Task Name',

                edit: {

                    create: () => {

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

                        return this.elem;

                    },

                    read: () => {

                        return this.dropdownobj.value;

                    },

                    destroy: () => {

                        this.dropdownobj.destroy();

                    },

                    write: (args: any) => {

                        this.dropdownobj = new DropDownList ({     

                         dataSource:this.Tasks,

                         fields:{value:'ObjId',text:'ObjName'},

                    value:args.rowData[args.column.field],

                         });            

                       this.dropdownobj.appendTo(this.elem);

                    }

                } 

            }

        ];

[Gopinath Muniraj]

Hi Surendra, 

Thanks for contacting Syncfusion support. 

We have found two ways to achieve the required solution. 

1.      We can add change event in edit template and based on that changes we can modify the further action. We have created a sample with a custom column having dropdown, based on the value chosen from that dropdown, progress value of the task is assigned using updateRecordByID method. Please find the below code snippet, 

app.component.ts 

write: (args: Object) => { 

                        this.dropdownlistObj = new DropDownList({ 

                            dataSource: statusData, 

                            fields: { value: 'customColumn', text: 'status' }, 

                            change: function(args) { 

                              if (args.isInteracted) { 

                                if (args.itemData.value == 'completed') { 

                                  let currentGantt: any = document.getElementById('ganttDefault').ej2_instances[0]; 

                                  let selectedData: any = currentGantt.flatData[currentGantt.selectedRowIndex]; 

                                  let rec: any = { 

                                    TaskID: selectedData.taskData.TaskID, 

                                    Progress: 100, 

                                    customColumn: 'completed' 

                                  } 

                                  currentGantt.updateRecordByID(rec); 

                                } else if (args.itemData.value == 'notCompleted') { 

                                    let currentGantt: any = document.getElementById('ganttDefault').ej2_instances[0]; 

                                    let selectedData: any = currentGantt.flatData[currentGantt.selectedRowIndex]; 

                                    let rec: any = { 

                                      TaskID: selectedData.taskData.TaskID, 

                                      Progress: 0, 

                                      customColumn: 'Not completed' 

                                    } 

                                    currentGantt.updateRecordByID(rec); 

                                } 

                              } 

                            } 

    }); 

 

 

Please refer this sample, 

https://stackblitz.com/edit/angular-mcvwhv-g37hpp?file=app.component.ts 

2.      Another solution is, we can achieve the same using actionComplete event for both cell edit and dialog editing with request type ‘save’. Please find the below code snippet, 

app.component.ts 

public actionComplete(args: any) { 

          if ((args.requestType == 'save' && (args.action == "CellEditing" || args.action == "DialogEditing")) || args.requestType == 'add') { 

          let currentGantt: any = document.getElementById('ganttDefault').ej2_instances[0]; 

          let selectedData: any = currentGantt.flatData[currentGantt.selectedRowIndex]; 

          let rec: any; 

          if (selectedData.customColumn == 'completed') { 

            rec = { 

              TaskID: selectedData.taskData.TaskID, 

              Progress: 100 

            } 

          } else if (selectedData.customColumn == 'notCompleted') { 

            rec = { 

              TaskID: selectedData.taskData.TaskID, 

              Progress: 0 

            } 

          } 

          currentGantt.updateRecordByID(rec); 

      } 

    } 

 

 

Please refer the sample below, 

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

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

Thanks, 

Gopinath M 

[Surendra Maurya]

Hello,

Thank you so much for your help this solution helped me for getting the result I want.

[Gopinath Muniraj]

Hi Surendra, 

Most welcome. 

We are happy to hear that your requirement has been achieved. Please create a new forum if you have any other queries. 

 

Regards, 

Gopinath M