How Can I deselect Items in list view using typescript

[Kishore Bandela]

Could you please show me an example how to deselect an item in list view? 

[Silambarasan I]

Hi Kishore, 

 

Thank you for contacting Syncfusion support. 

 

We have looked into your reported query and your requirement “to deselect an item in list view” can be achievable by resetting the selection using ‘selectedItemIndex’ property in ‘setModel()’ method. Please refer the below code example. 

 

[app.component.ts] 

import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core'; 

import { EJAngular2Module, ListViewComponent } from 'ej-angular2'; 

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: './app.component.html', 

    styleUrls: ['app.style.css'], 

    encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

    @ViewChild('listInstance') 

    public listInstance: ListViewComponent; 

    listdata: object[]; 

    fieldsdata: object; 

 

    constructor() { 

        this.listdata = 

            [{ "Texts": "Discover Music" }, 

            { "Texts": "Sales and Events" }, 

            { "Texts": "Categories" }, 

            { "Texts": "MP3 Albums" }, 

            { "Texts": "More in Music" }]; 

        this.fieldsdata = { "text": "Texts" }; 

    } 

 

    clicked() { 

            this.listInstance.widget.setModel({ 'selectedItemIndex': -1 }); 

    } 

} 

 

 

[app.component.html] 

 

<ej-listview #listInstance [dataSource]="listdata" [fieldSettings]="fieldsdata" width=100 persistSelection=true></ej-listview> 

<br> 

<input type="button" value="Un Select" (click)='clicked($event)'> 

 

 

Also, please refer the below sample that demonstrate your requirement in JSPlayground. 

https://jsplayground.syncfusion.com/ojuqniqb 

 

Could you please check the above sample and get back to us if you need further assistance? 

 

Regards, 

Silambarasan 

[Kishore Bandela]

Thanks for your response. But the above example is not working in our source code. We are using the below list view which doesn't have .widget.setModel({ 'selectedItemIndex': -1 }); 

@syncfusion/ej2-angular-lists

ERROR TypeError: Cannot read property 'setModel' of undefined

Thanks,

Kishore.

[Christopher Issac Sunder K]

Hi Kishore, 

Thanks for the update. 

In our previous sample, we have provided for EJ1 ListView. For EJ2 ListView, We can deselect an item in listview by removing the "e-active" class from the selected item.
We can utilize “getselectedItems” method for getting selected items from the listview and remove the ‘e-active’ class from that item.

 

Please refer the below link for sample
https://stackblitz.com/edit/typescript-ck5y3e?file=index.html 

Please check it and let us know if you have any concerns. 

Thanks, 

Christo

[Kishore Bandela]

Hi Kishore, 

Thanks for the update. 

In our previous sample, we have provided for EJ1 ListView. For EJ2 ListView, We can deselect an item in listview by removing the "e-active" class from the selected item.
We can utilize “getselectedItems” method for getting selected items from the listview and remove the ‘e-active’ class from that item.

 

Please refer the below link for sample
https://stackblitz.com/edit/typescript-ck5y3e?file=index.html 

Please check it and let us know if you have any concerns. 

Thanks, 

Christo

Thank you, guys! That works. Appreciate your help!

[Christopher Issac Sunder K]

Hi Kishore, 

We are glad to hear that the issue is resolved. Please let us know if you require any further assistance. 

Thanks,
Christo 

[Kennedyc Cheskaki]

On the more modern version I did this on the event being sent assuming I clicked the item got a dialog and now want to deselect on the same event

event.item.classList.remove('e-active');

[Shalini Maragathavel]

Hi Kennedyc, 

Good day to you. 

Based on your query, we suspect that you need to deselect the selected ListView item dynamically. You can achieve your requirement of deselecting ListView item dynamically by removing the "e-active" class from the selected item as demonstrated in the below code snippet, 

 

let list: any = new ListView({ 

  dataSource: flatData, 

}); 

list.appendTo('#app'); 

let btn1 = new Button({ cssClass: `e-primary` }); 

btn1.appendTo('#btn2'); 

btn1.element.onclick = (): void => { 

if (list.getSelectedItems()!=undefined&& (list.getSelectedItems().item as HTMLElement).classList.contains('e-active')) { 

    (list.getSelectedItems().item as HTMLElement).classList.remove('e-active'); 

  }}; 

In the sample, we have deselected the ListView items in an external button click.

Please find the below sample for your reference, 

 

Sample: https://stackblitz.com/edit/typescript-9vtyrj?file=index.ts 

If we have misunderstood your requirement, please elaborate on your use case requirement in detail with pictorial representation or video demonstration(if possible) to understand it better. So that we can check from our end and provide the prompt solution. 

Regards, 

Shalini M.