1. Home
  2. Forum
  3. Angular - EJ 2
  4. onchange event in dropdown

onchange event in dropdown

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);
                    }
                } 
            }
        ];

3 Replies 1 reply marked as answer
GM Gopinath Muniraj Syncfusion Team July 24, 2020 04:31 PM UTC

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, 
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, 
Please revert us if you need any further assistance on this. 
Thanks, 
Gopinath M 


Marked as answer
SM Surendra Maurya July 29, 2020 05:25 AM UTC

Hello,

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

GM Gopinath Muniraj Syncfusion Team July 30, 2020 05:04 AM UTC

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 


Loader.
Up arrow icon