Displaying nested property in Kendo Grid column with Angular

Question

Question:

I have a Kendo Grid in my Angular application, and I'm using the generateColumns method to dynamically generate columns for the grid. The data comes from an API response, and one of the properties is an array of roles.

Here is a snippet of the generateColumns method:

    generateColumns(dataItem: any): void {
  const excludedColumns = ['password'];

  const columns = Object.keys(dataItem)
    .filter((key) => !excludedColumns.includes(key))
    .map((key) => ({
      field: key,
      title: key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' '),
    }));

  // How can I modify the method to display the 'name' property of the 'roles' array in the 'role' column?

  console.log(columns);
  this.administration.columns = columns;
}

The 'dataItem' object has a 'roles' property, which is an array of objects. When I display this in the Kendo Grid, the 'role' column shows [object Object] instead of the actual role name.

Here's an example of the JSON data:

    {
  "id": 24,
  "username": "john_doe2",
  "roles": [
    {
      "id": 2,
      "name": "employee",
      "desc": "employee"
    },
    {
      "id": 1,
      "name": "admin",
      "desc": "admin"
    }
  ]
}

screenshot of grid table is also included

Answer 1

If you would like to display the nested "roles" in the Role column, you can use the Grid cell templates, and access and display whatever nested properties you need, e.g.:

https://stackblitz.com/edit/angular-dhztt1?file=src%2Fapp%2Fapp.component.ts

The template could be displayed conditionally based on some property of the respective column configuration object, e.g.:

https://stackblitz.com/edit/angular-dhztt1-da4znn?file=src%2Fapp%2Fapp.component.ts