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

3 posts, 1 answers
  1. Austin
    Austin avatar
    8 posts
    Member since:
    Sep 2016

    Posted 06 Sep Link to this post

    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. Answer
    Orlin
    Admin
    Orlin avatar
    22 posts

    Posted 09 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Austin
    Austin avatar
    8 posts
    Member since:
    Sep 2016

    Posted 12 Sep in reply to Orlin Link to this post

    Thank a lot on the solution which helps to solve the problems.
Back to Top