How to detect modifier keys when typing in search box of syncfusion DropDownList

[Tuariq]

Team,

I need to acheive a scenario where I want to perform a specific action if user hits modifier key along with any alphabet key (eg: CTRL+Q) while typing in search box provided in DropDownList. DropDownList has filtering enabled and all normal functions need to exist.

Is there any way to detect when CTRL+key has been preseen only at the time of typing in DropDownList control?

Events like keypress do not get fired like in case of normal input field.

Any help would be appreciated.

Thanks

Tuariq

[Ponmani Murugaiyan]

Hello Tuariq, 

 

Greetings from Syncfusion support. 

 

We have validated your reported issue. As per your requirement, we have bind the keydown event for filter input, while type CRTL + any key, shown the alert message. You can perform your required action inside the keydown event. Please find the code snippet and test sample for reference. 

 

[app.component.ts] 

 

export class AppComponent { 

    @ViewChild('sample') 

    public listObj: DropDownListComponent; 

    public sportsData: Object[] = [ 

        { Id: 'Game1', Game: 'American Football' }, 

        { Id: 'Game2', Game: 'Badminton' }, 

        { Id: 'Game3', Game: 'Basketball' }, 

        { Id: 'Game4', Game: 'Cricket' }, 

        { Id: 'Game5', Game: 'Football' }, 

        { Id: 'Game6', Game: 'Golf' }, 

    ]; 

    public fields: Object = { text: 'Game', value: 'Id' }; 

    public onOpen(args: any): void { 

      document.getElementsByClassName('e-input-filter')[0].addEventListener("keydown", this.myFunction); 

    } 

 

    public myFunction(e) { 

    if ((e.keyCode >= 32 && e.keyCode <= 126) && e.ctrlKey) { 

          alert('ctrl+ key is pressed'); 

        }; 

    } 

} 

 

 

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

Kindly check with the above provided sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[Tuariq]

Hi Ponmani,

Thanks a lot for providing the demo. This should solve my problem!

Regards,

Tuariq

[Ponmani Murugaiyan]

Hello Tuariq, 

Thanks for the update. 

Regards, 

Ponmani M 

[Tuariq]

Team,

It got implemented in the control shared (i.e DropDownList) and working fine.

However I also need to implement this scenario for syncfusion MultiSelect component also for which similar class could not be found (e-input-filter). Could you please help me out which class to target if I have to implment same scenario for MultiSelect?

Thanks

Tuariq

[Ponmani Murugaiyan]

Hello Tuariq, 

 

Good day to you. 

 

We have validated your reported query. In Multiselect component, bind the keydown event to the element using instance as like below code snippet. Please find the test sample below for reference. 

 

[app.component.ts] 

 

export class AppComponent { 

  @ViewChild('default') 

    public multiObj: MultiSelectComponent; 

    // define the JSON of filtering data 

    public data: { [key: string]: Object; }[] = [ 

        { Name: 'Australia', Code: 'AU' }, 

        { Name: 'Bermuda', Code: 'BM' }, 

        { Name: 'Canada', Code: 'CA' }, 

        { Name: 'Cameroon', Code: 'CM' }, 

        { Name: 'Denmark', Code: 'DK' }, 

        { Name: 'France', Code: 'FR' }, 

        { Name: 'Finland', Code: 'FI' }, 

        { Name: 'Germany', Code: 'DE' }, 

        { Name: 'Greenland', Code: 'GL' }, 

        { Name: 'Hong Kong', Code: 'HK' } 

    ]; 

 

    public query: Query = new Query(); 

    public fields: Object = { text: 'Name', value: 'Code' }; 

    public watermarks: string = 'Select countries'; 

     

    public onCreate(args: any): void {  

      this.multiObj.element.addEventListener("keydown", this.myFunction);  

    }  

 

    public myFunction(e) { 

    if ((e.keyCode >= 32 && e.keyCode <= 126) && e.ctrlKey) {  

          alert('ctrl+ key is pressed');  

        }; 

    } 

} 

 

 

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

 

Kindly check with the above sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M