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 ?

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

Answer 1

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:

Answer 2

You need to set the template of the column. By default it can only show primitive types such as "Number", "String", "Date" and "Boolean".