Change event for 'dropdownedit' column | Angular

[Ervin van der Merwe]

Hey, what is the change/select event for a dropdownedit control in angular grid?

The following does not trigger:

(select)="TypeChange($event)"

(change)="TypeChange($event)"

Drop Down Control:

field='bidType1'

editType='dropdownedit'

[validationRules]='validationRules'

[edit]='bidTypeParams'

(select)="BidTypeChange($event)"

headerText='BidType'width=85id="ddlelement">

this.bidTypeParams={

params:{dataSource:newDataManager(this.bidTypes),

fields:{text:'bidType1',value:'id'},

query:newQuery()

}

}

I have tried using @ViewChild but it does not register the control either.

Please help 

[Ervin van der Merwe]

I solved the issue partially by adding the 'change' property to the 'params' object:

this.myTypeParams={

params:{dataSource:newDataManager(this.Types),

fields:{text:'Type1',value:'id'},

query:newQuery(),

params:this.myFunc

}

}

But now I'm unable to call any other method from the myFunc() method...
Any advice?

[Ervin van der Merwe]

Ok, so this time I got a working solution:

params: {

        dataSource: new DataManager(this.Types),

        fields: { text: 'Type1', value: 'id' },

        query: new Query(),

        change: (a) => {

          this.myFunc(a.itemData.id);

        } 

      }

[Balaji Sekar]

Hi Ervin, 

 

Greetings from Syncfusion. 

 

Query: Change event for 'dropdownedit' column | Angular 

 

We have validated your query and you want use dropdown control events(change, select, etc) in a Grid column. You can achieve your requirement using editParams property. Here, we have binded select event for dropdown. Find the below code snippets and sample for your reference. 

 

. . . 

export class AppComponent { 

    . . . 

    public editparams: Object; 

    public pageSettings: Object; 

    public formatoptions: Object; 

 

    public ngOnInit(): void { 

        . . . 

        this.editparams = { params: { popupHeight: '300px', select: this.select } }; 

        this.pageSettings = { pageCount: 5 }; 

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

    } 

     

    select(args: any): void{ 

      console.log(args.itemData.ShipCountry); 

    } 

} 

 

<div class="control-section"> 

    <div class="col-lg-9"> 

        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                . . . 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

 

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

 

Reference: 

https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar