Hi I'm new to kendo ui, recently had created a table using kendo grid and my data shown [object Object] the cell.
what is the way to display the address object in a single data.
<!DOCTYPE html><html><head> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head><body> <div id="example"> <div id="grid"></div> <script> var peoples = { "people": [{ "name": "John Smith", "phone": "(519) 420-2391", "address": { "street": "123 Main St", "city": "Someplace" } }]}; $("#grid").kendoGrid({ dataSource: { data: peoples, schema: { data: 'people' }, }, scrollable: true, sortable: true, resizable: true, pageable: true, columnMenu: true, columns: peoples}); </script> </div></body></html>2 Answers, 1 is accepted
0
Accepted
Hello Austin,
The columns configuration of the Grid should be an array of objects with settings for each column.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns
The provided example assigns the data object as column configuration, which will not work, first because the data object is not an array, and second, because it does not contain any meaningful column settings that the Grid can parse and use. In other words, the column settings are currently being ignored and the Grid autogenerates its columns.
To render data with nested objects with the Kendo UI Grid, you need to break the data into fields for each column.
You could either set the street and city as separate columns, in which case you can do it as demonstrated here:
http://dojo.telerik.com/azOjuk
Or alternatively you could use a column template and group the street and city into one column like in this dojo demonstration:
http://dojo.telerik.com/ULuHOY/3
A similar example with nested objects is also available at:
http://demos.telerik.com/kendo-ui/grid/editing-custom
You can find more information about column templates here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
I hope this answers your question.
Regards,
Orlin
Telerik by Progress
The columns configuration of the Grid should be an array of objects with settings for each column.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns
The provided example assigns the data object as column configuration, which will not work, first because the data object is not an array, and second, because it does not contain any meaningful column settings that the Grid can parse and use. In other words, the column settings are currently being ignored and the Grid autogenerates its columns.
To render data with nested objects with the Kendo UI Grid, you need to break the data into fields for each column.
You could either set the street and city as separate columns, in which case you can do it as demonstrated here:
http://dojo.telerik.com/azOjuk
Or alternatively you could use a column template and group the street and city into one column like in this dojo demonstration:
http://dojo.telerik.com/ULuHOY/3
A similar example with nested objects is also available at:
http://demos.telerik.com/kendo-ui/grid/editing-custom
You can find more information about column templates here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
I hope this answers your question.
Regards,
Orlin
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Austin
Top achievements
Rank 1
Rank 1
answered on 13 Sep 2016, 01:23 AM
Thank a lot on the solution which helps to solve the problems.