Use switchMap with Kedno UI Gid in Angular2+

Question

I use Kendo UI for Angular Grid with data binding. I have two services: one to emit search event from filter component to grid component and one (based on BehaviorSubject) to call API.

The way of data binding with Grid that I use is based on Kendo examples. The problem is how to use switchMap to cancel API requests when user is typing text in filter input. I know the switchMap operator but i don't know how to use it in Kendo UI Grid based Service. I have tried many ways without success and i have no more ideas. My code below:

API Service methods used in Grid component

public query(state: any): void {  
    this.getItems(state)
        .subscribe(x =>   
            super.next(x));  
}  

private getItems(state: any): Observable<GridDataResult>{  
    let page = state.skip / state.take + 1;
    let queryStr =         
    `page=` + page + 
    `&size=` + state.take + 
    `&sortColumn=` + state.sortColumn + 
    `&sortDirection=` + state.sortDirection;

    return this.http  
        .get(`${this.BASE_URL}FindItemsComplex?${queryStr}`)  
        .pipe(
            map(response => (<GridDataResult>{
                data: response['data'],
                total: response['length']
            }))
        );  
}

Grid Component methods

ngOnInit() {
   this.subscription = this.searchService.searchEvent.
   debounceTime(400).
   subscribe((searchModel: ItemsFilter) => 
     {
       this.state = searchModel;   
       this.state.skip = 0;   
       this.state.take = 15;
       this.service.query(this.state);  
     }
   );    
 }

Where and how i should use switchMap? Thank you for your help.

EDIT

Filter component method used for emitting event

HTML

<input kendoTextBox [(ngModel)]="itemsFilter.textSearch" (ngModelChange)="onSearch()" [ngClass]="'form-control'" />

TS

onSearch() {
   this.searchService.Search(this.itemsFilter);
}

Search service

export class ItemsSearchService {
   constructor() {
       this.searchEvent = new EventEmitter();
   }

   Search(query :ItemsFilter) {
       this.searchEvent.emit(query);
   }

   searchEvent: EventEmitter<ItemsFilter>;
}

can you include the function that is called when a user enters text into the filte rcomponent? — ggradnig, Aug 21 '18 at 15:28

score 0 · Answer 1 · answered Sep 12 '18 at 07:52

0

Function 'debounceTime' can also cancel API requests when user is typing text in filter input like 'switchMap'. You already use 'debounceTime', So you don't need use 'switchMap' again.

answered Sep 12 '18 at 07:52

tiandiduwu

31
1
7

My experience is different, I'd like to kill all previous requests and let the last to be invoked. But now with 'debounceTime' I have cases when I got response from API from request which was invoked a moment earlier and last request most likely has finished faster. So current state of input filter and data in table doesn't match – user2641078 Sep 13 '18 at 08:14
debounceTime will kill all previous requests and just let the last to be invoked as you like. see the below statement from the office site:https://rxjs-dev.firebaseapp.com/api/operators/debounceTime debounceTime delays values emitted by the source Observable, but drops previous pending delayed emissions if a new value arrives on the source Observable. – tiandiduwu Sep 14 '18 at 09:16
check the example may you can find an answer. https://www.telerik.com/kendo-angular-ui/components/inputs/debounce-valuechange/ – tiandiduwu Sep 14 '18 at 09:26

Use switchMap with Kedno UI Gid in Angular2+

1 Answers1