Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Binding to remote via JSON

1 Answer 144 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brandon
Top achievements
Rank 1
Brandon asked on 29 May 2015, 01:51 PM

Hi There, I am new to Telerik but would like to get this working. I have a JSON URL and i am trying to drill down and show all the results of the child nodes under each entry section. THough i cant seem to get this schema defined correctly. If i want to show fields from the lowest node in xml/json how do i define it. The child node examples dont make it clear. Below url is test data so feel free to use.

Thanks

Brandon

 

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
   
   
 
        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://fhir.healthintersections.com.au/open/Patient?&_format=json"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        title: {type: "string" },
                                        title: { type: "string" }
                                  
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 550,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"totalRsults",
                                filterable: false
                            }
                        
                        ]
                    });
                });
            </script>
</div>
 
 
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 02 Jun 2015, 07:15 AM

Hello Brandon,

You should configure the schema.data and schema.total in order to instruct the DataSource where to read data and total item count from.

schema: {
 data: "entry",
 total: "totalResults",
 model: {
  fields: {
   title: {type: "string" },                                                                        
  }
 }
},

Then your column configuration might looks as follows:

columns: [{
  field:"title"                                
}]

 

However there few issues with that service:

  1. It is not OData service
  2. Since the client (your page) and the service are hosted on different domains you must be using JSONP to request the service otherwise you will be restricted by CORS. You can quickly try it by running the following example and inspecting the browser console - http://dojo.telerik.com/@rusev/Ociba. 

That said and the fact that this service doesn't support JSONP requests, at least I couldn't find in their docs, you should implement a server proxy. This proxy will request the service in question based on the requests made from client through DataSource.

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Brandon
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or