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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How Can I deselect Items in list view using typescript

Thread ID:

Created:

Updated:

Platform:

Replies:

142881 Feb 15,2019 04:07 PM UTC Mar 1,2019 12:20 PM UTC Angular - EJ 2 5
loading
Tags: ListView
Kishore Bandela
Asked On February 15, 2019 04:33 PM UTC

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

Silambarasan I [Syncfusion]
Replied On February 18, 2019 08:55 AM UTC

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 


Kishore Bandela
Replied On February 25, 2019 09:46 PM UTC

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 [Syncfusion]
Replied On February 26, 2019 12:46 PM UTC

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

Kishore Bandela
Replied On February 28, 2019 05:32 PM UTC

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!

Christopher Issac Sunder K [Syncfusion]
Replied On March 1, 2019 12:20 PM UTC

Hi Kishore, 

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

Thanks,
Christo 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;