How Can I deselect Items in list view using typescript

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?

Reply | Reply with quote

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.

https://jsplayground.syncfusion.com/ojuqniqb

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

Regards,

Silambarasan

Reply | Reply with quote

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.

Reply | Reply with quote

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 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

Reply | Reply with quote

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 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!

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US