CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
nish
nish

Reputation: 256

Kendo UI Grid Showing json objects as [object Object]

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

Upvotes: 0

Views: 6231

Answers (1)

Iman Mahmoudinasab
Iman Mahmoudinasab

Reputation: 7015

The reason you see [object Object] is because address is of type object and you pass it into your cell which will convert it to a string. And thus the cell is filled with the string representation of object which in this case is [object Object].

Example 1:

function formatAddress(address){
    return address.street + ' ' + address.phone;
}

var grid = $("#grid").kendoGrid({
    dataSource: {
        pageSize: 20,
        data: createRandomData(50)
    },
    pageable: true,
    height: 430,
    columns: [
        { field: "FirstName", title: "First Name", width: "140px" },
        { field: "LastName", title: "Last Name", width: "140px" },
        // `formatAddress` will be called from the global variable scope like eval() usually does
        { field: "Address", template: "#= formatAddress(data) #" } 
    ]
}).data("kendoGrid");

Example 2: (MVVM)

<div id="grid" data-role="grid" data-bind="source: gridSource"
     data-columns='[{field:"FirstName",title:"First Name"}, {field:"LastName",title:"Last Name"}, {field:"Address",template:"#= formatAddress(data) #"}]'>
</div>

Upvotes: 2

Related Questions