A button (or checkbox) to select all items in checklist

[Alfredo]

Hi.
I'm using the 'ListView' component (import {ListViewModule} from '@ syncfusion / ej2-angular-lists'). In particular I am using a 'checklist' for multiple selections.
I have seen that, in many applications, in addition to the list of selections, a particular choice is provided (a checkbox or a button) for the simultaneous selection of all the items in the list. It seems to me that there is no such possibility in the syncfusion product.
Is there anyone who can give me an example on how to achieve this functionality?
I saw that 'checkAllItems' exists in the methods provided, but I can't get it to work. In fact I have not even understood if it is what I need to select all the items in the list with a single click.

I hope for help

Thanks

If I am allowed, I would ask another question:
Is it possible to leave the 'checklist' by pressing the ESC key? If yes, could I have an example?
Thank you again.

[Sowmiya Padmanaban]

Hi Alfredo, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query with ListView component. We suspect that your requirement is to select all list items in the ListView component, and this can be achieved using checkAllItems method of ListView.   

 

Refer the below code snippet.  

   <button id='add' (click)='Select($event)' class="e-control e-btn e-lib e-primary">Select All</button> 

<ejs-listview id='sample-list' #listview [dataSource]='data' [fields]='fields' [showCheckBox]='true' headerTitle='To Do List' showHeader='true'></ejs-listview> 

 Select() { 

    // Select all the items in ListView component. 

   this.listview.checkAllItems(); 

} 

And also, if you want to clear the selected item using ESC key. In ListView component, we have provided a unCheckAllItems method, it clears all the selected item in ListView component. 

 

To achieve your requirement, you need to bind the keydown event and clear the selection using unCheckAllItems method. 

 

Refer the below code snippet. 

    @HostListener('window:keydown', ['$event']) 

     handleKeyboardEvent(event: KeyboardEvent) { 

      if(event.keyCode == 27){ 

      this.listview.uncheckAllItems(); 

    } 

Refer the sample link below. 

 

https://stackblitz.com/edit/angular-cxbhqg-oefkvf?file=app.component.html 

 

If you want to select only the particular item, we suggest you to use selectItem method of ListView component. 

 

Refer the below link to know more about the ListView component. 

 

UG Documentation- https://ej2.syncfusion.com/angular/documentation/listview/check-list/ 

 

API reference- https://ej2.syncfusion.com/angular/documentation/api/list-view/#selectitem 

 

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

 

Regards,  

Sowmiya.P 

[Alfredo]

Thanks.
As always, you have been very helpful.

[Sowmiya Padmanaban]

Hi Alfredo,  

  

Most Welcome. We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. We will happy to assist you. 

  

  

Regards,  

Sowmiya.P