Load grid data asynchronously after button press

[Missing User]

Hello everyone, as the title says I'm trying to load my data asynchronously but I'm not sure I'm proceeding the right way, here's my code

TS:

gridData$!: Observable<I.Block[]>;

//this is a function that is called when the user submits a form
search(): void {
    this.gridData$ = this.httpService.getBlockList(variousParameters);
}

//the getBlockList function simply does a http post call
getBlockList(variousParameters): Observable<I.Block[]> {
    return this.http
      .post<I.Block[]>(someUrl, variousParameters)
}

HTML, version 1 who gave me error: Type 'Block[] | null' is not assignable to type 'any[]'

<kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData$ | async"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>

So I tried this, which doesn't give me errors and seems to work, but I'm not sure it's the right way to proceed.
I don't think it's correct because, even with pageSize set to 100 and 16 columns (5 of which hidden), it takes up to 8 seconds to load a single page (on a total of only 800 results, with the total response size being only 31kb)
I read https://www.telerik.com/blogs/how-to-get-the-best-grid-performance but I can't really neither lower the number or columns or the results displayed per page.

HTML version 2, works but really slow

<ng-container *ngIf="gridData$ | async as gridData">
   <kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>
 </ng-container>

I also read https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ but I couldn't understand the async example (the second example, since the first one doesn't use async pipe but subscribes to the observable). On this point, I think that adding "dummy comments" would help first time Kendo users like me.

Thanks in advance

[Martin Bechev]

Hi Marco,

In general, the built-in kendoGridBinding directive is applicable only for local data:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-built-in-directive

To use remote data in this case, a custom binding directive could be implemented by the developer. For more details and steps on how to create such a custom directive please check the following topic from our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-directives

Another approach that could be taken is to use the data option of the Grid as demonstrated in the following StackBlitz demo:

https://stackblitz.com/edit/angular-tvie6p

I hope this steers you in the right direction.

Regards,
Martin
Progress Telerik