Kendo UI Grid with dynamic columns and random data showing JSON objects as [object Object]

Question

The data is random and I cant predict the columns. I read data from remote and display it on the grid.

I get json objects as [object Object] in Kendo UI Grid, How can i visualize it or is there any way to show a detail view of a cell in a Kendo grid ?

enter image description here

I think it would solve the issue if I can insert a treeview of JSON Object in those cells.

check this and this if you want to show your data in your grid with treeview. Also please provide some samples of the json codes you get from remote server. — Iman Mahmoudinasab

MechStar MechStar · Accepted Answer · 2013-12-03T21:37:51

The problem is that your Address is a complex object, so you need to tell kendoGrid how to display it. For example, I have a complex object Connected, as follows: {Connected:{Value:3, Percentage:100}}

If I simply map it to some column, I will get [object Object] displaying in my grid, identical to your experience.

Solution:

Let's say that I need to display my Connected object as follows: '3 (100 %)'. The grid has no way to know that. Therefore I had to create a template in my column declarations:

var gridColumns = [
  { field: "Connected", title: "Connected", template: function(data) {
      return data["Connected"].Value + " (" + data["Connected"].Percentage + " %)"; 
    }
  }
];

And this is what I got:

Example

Kendo UI Grid with dynamic columns and random data showing JSON objects as [object Object]

2 Answers