Bingding data to Kendo Angular Grid-CodePudding

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 >
  <div >
    <div >
      <div >
        <ag-grid-angular
          id="productGrid"
          style="width: 100%; height: 100%"
          
          [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>

CodePudding user response：

try adding #productGrid as a directive for the ag-grid-angular html tag. Idk if @ViewChild takes automatically the id attribute.

Also in my projects I have a gridReady event that initializes the gridApi and you might be missing.

HTML:

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

TS:

onGridReady(params) {
    this.gridApi = params.api;
}

Also try placing a ? after the agGrid variable just to discard any initialize error that may cause the grid to stop working and find out what problem is occurring

    if (result) {
      this.agGrid?.api.setRowData(result.value);
    }

CodePudding user response：

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

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