How to display json data on datagrid

2 posts, 0 answers
  1. Steven
    Steven avatar
    3 posts
    Member since:
    May 2016

    Posted 19 May Link to this post

    My first test is very simple plan, binding a remote data url like below, and then display them in my datagrid. The first row is title and below it are values. 

    [["P0010001","NAME","state"],

    ["4779736","Alabama","01"],

    ["710231","Alaska","02"],

    ["6392017","Arizona","04"],

    ["2915918","Arkansas","05"],

    When running program, only titles can display in datagrid (Total Populatoin and NAME)- see pic in attachment, all the values are missing; and the following error messages are from Chrome browser:(see the attachmentment) . 

    The following are my coding. Thanks! 

            <body>
            <div id="grid"></div>
    <script>

    queryData = new kendo.data.DataSource({
                type: "json",
                pageSize: 4,
                transport: {
                read: {
                    url: "http://api.census.gov/data/2010/sf1?key=f8deadbe74e470d2055cd099ba777b9e717f1ddd&get=P0010001,NAME&for=state:*",
                    dataType: "json",
                    type:"get"
                }
            },//transport
                    
            schema: {
            // the data, which the data source will be bound to is in the "list" field of the             response
            data: "list"
        } //schema           
            
        }); //queryData ends here

    $("#grid").kendoGrid({
                  selectable: "multiple cell",
                  allowCopy: true,
                  scrollable: true,    
                    
                  columns: [
                   { field: "P0010001", 
                     title:"Total Population"
                   },
                   { field: "NAME" }
                    ],
                  dataSource: queryData,
                  height:400
                    
                });//dgrid ends here
        </script>       

    </body>

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 May Link to this post

    Hello Steven,

    The DataSource expects that the incoming data contains objects for the row data:

    [
      { "P0010001": "4779736", "NAME": "Alabama", "state": "01"},
      { "P0010001": "710231", "NAME": "Alaska", "state": "02"},
      { "P0010001": "6392017", "NAME": "Arizona", "state": "04"},
      { "P0010001": "2915918", "NAME": "Arkansas", "state": "05"}
    ]

    You can either pre-process the data before returning it from the server, or use the schema.parse configuration option to define a method that parses it on the client-side.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top