How to catch keypress event

[Dusan Aleksic]

Hello I have a listview that I can select items on, I want to do something when user presses enter key on the keyboard. How do I go about this?

What I want is to let user navigate listView elements via keyboard up and down keys then when the user presses enter key while an item is selected I want to do something with the data bound to that element.

[Muthukrishnan Kandasamy]

 

Hi Dusan, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in Syncfusion Angular ListView component. Currently, we have not provided the keypress event for the ListView component. For achieving your requirement, we have prepared a sample application. In this sample, we have bind the key down event for ListView component by using the actionComplete event of the ListView. Please refer to the below code block. 

 

[app.component.ts] 

 

export class AppComponent { 

  @ViewChild("list") listRef: ListViewComponent; 

  //Define an array of JSON data 

  public data: Object[] = checkboxdata; 

 

  constructor() {} 

 

  OnActionComplete(args) { 

    this.listRef.element.addEventListener("keydown", function(e) { 

      console.log(e.key + " key pressed!!"); 

    }); 

  } 

} 

 

 

[app.component.html] 

 

<ejs-listview 

      #list 

      id="sample-list-flat" 

      [dataSource]="data" 

      (actionComplete)="OnActionComplete($event)" 

    ></ejs-listview> 

 

 

Please refer to the below link for the sample. 

 

https://stackblitz.com/edit/angular-listview-keydown?file=app.component.ts 

 

Please refer to the below links to know more about Syncfusion ListView component. 

 

Description	Link
Getting started	https://ej2.syncfusion.com/angular/documentation/listview/getting-started/
Data binding	https://ej2.syncfusion.com/angular/documentation/listview/data-binding/
Templates	https://ej2.syncfusion.com/angular/documentation/listview/customizing-templates/
Live demo	https://ej2.syncfusion.com/angular/demos/#/material/listview/call-history

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K