Using Kendo's Angular Grid to link data sources

I'm currently facing a minor issue with the Kendo Grid for Angular.

My attempt to bind data after fetching is resulting in the following error:

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

This indicates that 

this.agGrid.api.setRowData(result.value)
is causing trouble. Below is my code snippet:

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

public rowData$: Observable<Product[]>;

// To access the API of the Grid
@ViewChild('productGrid') agGrid: AgGridAngular;

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

// retrieve all product types
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>
javascriptangulartypescriptkendo-uikendo-grid

Answer №1

Make sure to include #productGrid as a directive for the ag-grid-angular html tag. It's uncertain if @ViewChild automatically captures the id attribute.

In my experience with projects, having a gridReady event to initialize the gridApi is crucial and you may have overlooked this step.

Example HTML code:

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

TS code snippet:

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

To troubleshoot any initialization errors that could affect grid functionality, consider placing a ? after agGrid variable to identify potential issues.

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

Answer №2

One issue that arose was the necessity for the grid's height to be specified 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)">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

What is the best way to target the shadow DOM host element specifically when it is the last child in the selection?

I want to style the shadow DOM host element as the last child. In this particular situation, they are currently all green. I would like them to be all red, with the exception of the final one. class MyCustomElement extends HTMLElement { constructor() ...

javascripthtmlcsscustom-element

Converting JSON data retrieved from a URL into HTML format

I have a JSON output from a URL that I need to format into html. The structure of the JSON data is as follows: prtg-version "xxxxxxx" treesize 0 channels 0 name "Downtime" name_raw "Downtime" lastvalue "" lastvalue_raw "" 1 name ...

javascriptjqueryhtmljson

Issue with form validation causing state value to remain stagnant

Giving my code a closer look, here is a snippet in HTML: <input type="text" name="email" id="email" autoComplete="email" onChange={(e) => {validateField(e.target)}} className="mt-1 ...

javascriptreactjsnext.js

Transform the words in a string into an array

I'm scratching my head trying to find a solution on Stack Overflow, but nothing seems like the right fit. Can anyone provide some guidance? I need a regex that will enable me to use JavaScript split to break a string into an array. The test case is: ...

javascriptregex

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs

Steps for customizing the text representation of an object:

In my reactive form component, I have an input control attached to a formGroup. Let's consider this object: {Id: 1, Text: "some text here..."}. Just like a select or dropdown menu, I want to display the 'Text' part in the input field but sub ...

angularangular-reactive-forms

Gitlab runner fails to complete lint command due to timeout issue

I am facing an issue with a specific GitLab CI step that I have defined as follows: lint: stage: frontend_check only: changes: - frontend/**/* script: - cd frontend/ngapp - npm run lint - npm run prettier Whenever I run this on ...

node.jsangulargitlabgitlab-ci-runner

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Presented here is a filter expression and Key Condition. The specific set of conditions are as follows: {"Age":{"eq":3},"Sex":{"eq":"MALE"}} const params: QueryCommandInput = { TableName: my_tab ...

typescriptamazon-dynamodb

Challenges arise when attempting to pass array data from Ajax to Google Maps

I'm facing an issue with my Google map. I have a data array that is dynamically returned, and I want to use it to add markers to the map. However, the markers don't work when I pass the data variable to the add_markers() function. It only works i ...

javascriptarraysajaxgoogle-mapsgoogle-maps-api-3

AngularJS - automatically submitting the initial item

Is there a simple way to automatically select the first item in my ng-repeat when the list is loaded for the user? Currently, I am using ng-click, but I am unsure of how to automatically trigger a click on the first item. Here is my ng-repeat: <div n ...

javascriptangularjsangularjs-ng-repeat

Tips for utilizing ngModel within *ngFor alongside the index?

Currently, I am dynamically generating mat-inputs using *ngFor. My goal is to store each value of [(ngModel)] in a separate array (not the one used in *ngFor) based on the index of the *ngFor elements. Here's my implementation: <div *ngFor="let i ...

angulartypescriptformsngfor

Showing records from Firebase that are still within the date range

I'm currently developing an application that allows users to book appointments on specific dates. After booking, I want the user to only be able to view appointments that are scheduled for future dates. I've attempted to compare the date of each ...

typescriptfirebaseionic3angularfire2

I'm having trouble getting onClick to function properly in CodeIgniter

While attempting to utilize onClick in the PHP page as shown below: <a href="javascript:void(0);" onClick="deleteCourse('<?php echo $row->courseId;?>');" class="delete">Delete</a> And in the JavaScript page, the function is ...

javascriptphpjquerycodeigniter-3

Flatbuffers does not exist in this context

Currently, I am working on a nodeJs application that involves the use of Google Flat Buffer. After installing flatc on my MacBook Pro, I compiled the schema below: namespace MyAlcoholist; table Drink { drink_type_name: string; drink_company_name: stri ...

javascriptnode.jsflatbuffers

The Javascript function call from the <img src="myFunction()"> is malfunctioning

I am looking to dynamically pass the URL of an image using a JavaScript function. <head> <script> function myFunction() { var str1 = "somepictureurl.png"; return str1; } </script> </head> <body> <img src="myFu ...

javascripthtmljsp

Using Regex to detect recurrent (similar) patterns in jQuery <input> tags

I need assistance with ensuring that users input article numbers in the correct format, like this: ABC_ABC123; AB__B2A4; ABF_323WET; ... Currently, I have a regex pattern that works for one article number: var mask1 = /^([A-Z]{2})([A-Z|_]{1})_([A-Z0-9]{ ...

javascriptregex

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

javascriptcssangularjs

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

Working on a map application within Palantir utilizing the workshop module. My goal is to have transport routes showcased along roads depending on user inputs. I am familiar with displaying a route using GeoJSON data, but I'm wondering if there is a w ...

typescriptgeospatialpalantir-foundry