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

How to display json data on datagrid

1 Answer 224 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 19 May 2016, 04:04 PM

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>

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 23 May 2016, 09:43 AM

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!
 
Tags
General Discussions
Asked by
Steven
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or