React kendo grid setting array item as column field

Question

I have products.json file with all categories as object. It works fine if the data format is in the below link but it fails if categories in that json is an array. I am trying to create a react grid with one column from array of category items.

Example: https://stackblitz.com/edit/react-txwobq?file=app/products.json

It works fine with categories block as

<Column field="Category.CategoryName" title="CategoryName" />

in grid code with the below json object

"Category" : {
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}

But I get the external api in array format for categories like

"Category" : [{
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}]

I tried reading this value in react kendo grid like this but no luck. What was the mistake I am doing?

<Column field="Category[0].CategoryName" title="CategoryName" />

score 2 · Answer 1 · answered Mar 28 '19 at 09:32

You can bind the column to the "Category" field and define custom cell component which to render the first item from the array. Please check the example below:

Column definition:

  <Column
    field="Category"
    title="Categories"
    cell={CategoryCell} 
  />

Custom Cell:

const CategoryCell = (props) => {
   const category = props.dataItem[props.field][0];

   return <td>{category.CategoryName}</td>;
};

React kendo grid setting array item as column field

1 Answers1