Virtualizing the DropDownList Data

Environment

Product

Progress® Kendo UI® for Angular DropDowns

Description

How can I implement remote data virtualization in a Kendo UI for Angular DropDownList?

Solution

To achieve remote data virtualization with the DropDownList component, utilize the rxjs BehaviorSubject which relies on the arguments provided by the pageChange event. The pageChange event is private and is emitted by the internal kendo-list component used in the DropDownList popup. Additionally, the described approach can also be applied to other DropDowns components like the MultiSelect.

1. Create the stateChange BehaviorSubject and pass the current state to it.

   ts

       public state: any = {
           skip: 0,
           take: 50
       };
       private stateChange = new BehaviorSubject<any>(this.state);

2. Use switchMap to cancel the initial stateChange observable and attach a new one which sends a request to get the remote data for the current state. When subscribing, create a data array which consists of the returned data and empty objects so that it simulates the complete data array.

   ts

       constructor(service: OrdersService) {
           this.stateChange
               .pipe(
               switchMap(state => {
                   if (this.data.length > 0) {
                   this.loading = true;
                   }
                   this.state = state;
                   return service.fetch(state);
               })
               )
               .subscribe((response: any) => {
               if (this.data.length === 0) {
                   // even though we are getting only 50 items from the response we simulate an array that consists of all data items
                   this.data = response.data.concat(
                   new Array(response.total - this.state.take)
                   );
               } else {
                   // if there is already loaded data, it is replaced with the latest received data
                   this.data.splice(this.state.skip, this.state.take, ...response.data);
               }
               this.loading = false;
               });
       }

3. Handle the pageChange event of the internal kendo-list component. Consequently, pass the emitted state to the stateChange BehaviorSubject.

   ts

       public onOpened() {
           // optionsList is a reference to the internal kendo-list component used in the DropDownList popup.
           // Pass the current state to the stateChange BehaviorSubject on each pageChange event.
           this.dropdownlist.optionsList.pageChange.subscribe(state =>
               this.stateChange.next(state)
           );
       }

4. Within the kendoDropDownListItemTemplate, display a span with the k-skeleton, k-skeleton-text, and k-skeleton-wave classes for the items which don't exist.

   html

       <ng-template kendoDropDownListItemTemplate let-dataItem>
           <div *ngIf="!dataItem; else elseBlock">
           <span class="k-skeleton k-skeleton-text k-skeleton-wave"></span>
           </div>
           <ng-template #elseBlock>{{ dataItem.ShipName }}</ng-template>
       </ng-template>

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...