This is a migrated thread and some comments may be shown as answers.

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

2 Answers 159 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Austin
Top achievements
Rank 1
Austin asked on 07 Sep 2016, 01:36 AM

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

Sort by
0
Accepted
Orlin
Telerik team
answered on 09 Sep 2016, 06:09 AM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Austin
Top achievements
Rank 1
answered on 13 Sep 2016, 01:23 AM
Thank a lot on the solution which helps to solve the problems.
Tags
Grid
Asked by
Austin
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Austin
Top achievements
Rank 1
Share this question
or