Bingding data to Kendo Angular Grid

Question

I am having a small issue with Kendo Grid for Angular.

I'm trying to bind data after fetching but I am getting this error:

ERROR TypeError: Cannot read properties of undefined (reading 'api')

meaning that the this.agGrid.api.setRowData(result.value) is problematic. Here is my code:

public columnDefs = [
{
  headerName: 'productTitle',
  field: 'productTitle',
  sortable: true,
  filter: true,
},
{
  headerName: 'productDescription',
  field: 'productDescription',
  sortable: true,
  filter: true,
},
];

public rowData$: Observable<Product[]>;

// For accessing the Grid's API
@ViewChild('productGrid') agGrid: AgGridAngular;

// initialize component
ngOnInit() {
    this.getProducts();
}

// fetch all producttypes
getProducts(odataQueryString: string = undefined): any {
this.productService
  .getAll_Product(odataQueryString)
  .subscribe((result: ODataResponse<Product[]>) => {
    if (result) {
      this.agGrid.api.setRowData(result.value);
    }
  });
}

HTML

<div class="body flex-grow-1 px-3">
  <div class="container-lg">
    <div class="row">
      <div class="col-lg-12">
        <ag-grid-angular
          id="productGrid"
          style="width: 100%; height: 100%"
          class="ag-theme-alpine"
          [columnDefs]="columnDefs"
          [rowData]="rowData$ | async"
          enablecolresize
          enablesorting
          enablefilter
          rowheight="22"
          rowselection="multiple"
        >
          <ag-grid-column
            headerName="productTitle"
            field="productTitle"
            [width]="125"
          ></ag-grid-column>
          <ag-grid-column
            headerName="productDescription"
            field="productDescription"
            [width]="120"
          ></ag-grid-column>
        </ag-grid-angular>
      </div>
    </div>
  </div>
</div>

Answer 1

Problem was that the height of the grid needed to be in pixels.

<ag-grid-angular
  #productGrid
  id="productGrid"
  style="width: 100%; height: 500px"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [rowData]="rowData$ | async"
  enablecolresize
  enablesorting
  enablefilter
  rowheight="22"
  rowselection="multiple"
  (gridReady)="onGridReady($event)">