Categories: Web DevelopmentServer-Side Web DevelopmentTutorials

Working with remote data

3 min read

(For more resources related to this topic, see here.)

Getting ready

Create a new document in your editor.

How to do it…

Copy the following code into your new document:

<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.
min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.
min.css">
<script src = "kendo/js/jquery.min.js"></script>
<script src = "kendo/js/kendo.web.min.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 12- Working with Remote Data</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function () {
   var serviceURL = "http://gonautilus.com/kendogen/KENDO.cfc?method=";
   var myDataSource = new kendo.data.DataSource({
   transport: {
      read:  {
         url: serviceURL + "getArt",
         dataType: "JSONP"
      }
   },
   pageSize: 20,
   schema: {
      model: {
         id: "ARTISTID",
         fields: {
            ARTID: { type: "number" },
            ARTISTID: { type: "number" },
            ARTNAME: { type: "string" },
            DESCRIPTION: { type: "CLOB" },
            PRICE: { type: "decimal" },
            LARGEIMAGE: { type: "string" },
            MEDIAID: { type: "number" },
            ISSOLD: { type: "boolean" }
            }
         }
      }
   } );
   $("#myGrid").kendoGrid({
      dataSource: myDataSource,
      pageable: true,
      sortable: true,
      columns: [
            { field: "ARTID", title: "Art ID"},
            { field: "ARTISTID", title: "Artist ID"},
            { field: "ARTNAME", title: "Art Name"},
            { field: "DESCRIPTION", title: "Description"},
            { field: "PRICE", title: "Price", template: '#= kendo.
toString(PRICE,"c") #'},
            { field: "LARGEIMAGE", title: "Large Image"},
            { field: "MEDIAID", title: "Media ID"},
            { field: "ISSOLD", title: "Sold"}]
      } );
   } );
</script>
<div id="myGrid"></div>
</body>
</html>

How it works…

This example shows you how to access a JSONP remote datasource. JSONP allows you to work with cross-domain remote datasources. The JSONP format is like JSON except it adds padding, which is what the “P” in JSONP stands for. The padding can be seen if you look at the result of the AJAX call being made by the Kendo Grid. It simply responds back with the callback argument that is passed and wraps the JSON in parentheses.

You’ll notice that we created a serviceURL variable that points to the service we are calling to return our data. On line 19, you’ll see that we are calling the getArt method and specifying the value of dataType as JSONP. Everything else should look familiar.

There’s more…

Generally, the most common format used for remote data is JavaScript Object Notation (JSON). You’ll find several examples of using ODATA on the Kendo UI demo website. You’ll also find examples of performing create, update, and delete operations on that site.

Outputting JSON with ASP MVC

In an ASP MVC or ASP.NET application, you’ll want to set up your datasource like the following example. ASP has certain security requirements that force you to use POST instead of the default GET request when making AJAX calls. ASP also requires that you explicitly define the value of contentType as application/json when requesting JSON. By default, when you create a service as ASP MVC that has JsonResultAction, ASP will nest the JSON data in an element named d:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "POST",
            url: serviceURL,
            dataType: "JSON",
            contentType: "application/json",
            data: serverData
        },
        parameterMap: function (data, operation) {
            return kendo.stringify(data);
        }
    },
    schema: {
        data: "d"
    }
});