GridCompoenent ColumnDirective dropdownedit Event

[COMMB]

It isn't particularly clear how to listen to the change event of a ColumnDirective editType of dropdownedit

How do I do this?

[Joseph Christ Nithin Issack]

Based on your query, you want to listen to the change event of the dropdown of a column for which the editType is set as dropdownedit. You can achieve your requirement by using the `column.edit` property of the EJ2 Grid where you can set the editparams of the dropdown.  

Please refer the below code example. 

xport class NormalEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      newRowPosition: 'Top', 

    }; 

    this.editparams = { 

      params: { popupHeight: '300px', change: this.dropdownChange.bind(this) }, 

    }; 

    this.validationRule = { required: true }; 

    this.orderidRules = { required: true, number: true }; 

    this.pageSettings = { pageCount: 5 }; 

    this.format = { type: 'dateTime', format: 'M/d/y hh:mm a' }; 

  } 

  dropdownChange(args) { 

    console.log(args); 

  } 

  actionBegin(args) {} 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <div className="col-md-9"> 

            <GridComponent 

              dataSource={orderDataSource} 

              ref={(grid) => (this.gridInstance = grid)} 

              toolbar={this.toolbarOptions} 

              allowPaging={true} 

              editSettings={this.editSettings} 

              pageSettings={this.pageSettings} 

              actionBegin={this.actionBegin.bind(this)} 

            > 

              <ColumnsDirective> 

                ------------------ 

                ------------------ 

                <ColumnDirective 

                  field="ShipCountry" 

                  headerText="Ship Country" 

                  width="150" 

                  editType="dropdownedit" 

                  edit={this.editparams} 

                ></ColumnDirective> 

              </ColumnsDirective> 

              <Inject services={[Page, Toolbar, Edit]} /> 

            </GridComponent> 

          </div> 

        </div> 

      </div> 

    ); 

  } 

} 

Sample: https://stackblitz.com/edit/react-67zbjm 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist 

Please get back to us for further details.