Hi Emanuele,
Thank you for contacting Syncfusion support.
We have checked your scenario and need more information to reproduce your issue. Please provide the details for the below scenario,
· Confirm whether you are observing data source from a service.
· Confirm whether you are observing textbox input using rxjs.
· Specify whether you have used any rxjs operators to filter the data and observe it.
· Explain how you are assigning the actual input from textbox to ListView in detail.
Could you please share above details with complete code snippets to proceed further on the reported issue? Based on this we will check and provide a better solution for your requirement.
Regards,
Vinoth Kumar S
Hello, thanks for the prompt reply. Going in order yes, I confirm that the data of the dataSource come from a service, I continue with the confirmation that the input of the textbox is taken in management by an observable that to the trigger of a ValueChanges, generates through an combineLatest an observable that continene l 'union of what was entered in the textbox and what I'm getting from the service, seeing an external filter that gives me all the values containing what I typed. I do not assign textbox input, using it only for filtering purposes.
CODE HTML:
<div class="search-box">
<div class="e-input-group">
<input #searchInput class="e-input" type="text" placeholder="Cerca..." [formControl]="filter" />
</div>
</div>
.....
<ejs-listview [dataSource]='filteredPersons$ | async' [template]='win_template' [enableVirtualization]='true' class="e-list-template" (select)="onItemSelected($event)"
(actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)" style="height:86vh;">
<ng-template #win_template let-dataSource="">
<div class="e-list-wrapper">
<div class="e-card">
<div class="e-card-header">
<div class="e-card-header-image"><img src="{{getPeopleIcon(dataSource)}}" /></div>
<div class="e-card-header-caption">
<div class="e-card-header-title">{{dataSource.name}}</div>
<div class="e-card-header-sub-title">{{dataSource.din}}</div>
</div>
</div>
<div class="e-card-content">{{dataSource.fleet}}</div>
</div>
</div>
</ng-template>
</ejs-listview>
CODE TS:
public peoples: Observable<Person[]>;
filter: FormControl;
filter$: Observable<string>;
filteredPersons$: Observable<Person[]>;
...
constructor(private peopleStore: PersonStore <- service that returns the observable) {
}
this.peoples = this.peopleStore.peoples;
this.filter = new FormControl('');
this.filter$ = this.filter.valueChanges.pipe(startWith(''));
this.filteredPersons$ = combineLatest(this.peoples, this.filter$).pipe(
map(([peoples, filterString]) => {
var filteredItems: Person[] = peoples.filter(people => people.name.indexOf(filterString) !== -1);
if (filteredItems.length == 0)
return new Array<Person>();
return filteredItems;
})
);
