We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How Can I deselect Items in list view using typescript

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

7 Replies

SI Silambarasan I Syncfusion Team February 18, 2019 03:55 AM

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. 
 
Could you please check the above sample and get back to us if you need further assistance? 
 
Regards, 
Silambarasan 



KB Kishore Bandela February 25, 2019 04:46 PM

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.


CI Christopher Issac Sunder K Syncfusion Team February 26, 2019 07:46 AM

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 check it and let us know if you have any concerns. 

Thanks, 
Christo


KB Kishore Bandela replied to Christopher Issac Sunder K February 28, 2019 12:32 PM

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 check it and let us know if you have any concerns. 

Thanks, 
Christo

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


CI Christopher Issac Sunder K Syncfusion Team March 1, 2019 07:20 AM

Hi Kishore, 

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

Thanks,
Christo 



KC Kennedyc Cheskaki September 26, 2021 12:37 PM

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');



SM Shalini Maragathavel Syncfusion Team September 27, 2021 08:12 AM

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, 
 

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. 



Loader.
Live Chat Icon For mobile
Up arrow icon