Working with remote data

Exclusive offer: get 50% off this eBook here
Instant Kendo UI Grid [Instant]

Instant Kendo UI Grid [Instant] — Save 50%

Practical recipes to learn the Kendo UI Mobile library and its various components for building mobile applications effectively with this book and ebook

$12.99    $6.50
by James R. Lamar | August 2013 | Java Web Development

This article created by James R. Lamar, the author of Instant Kendo UI Grid, demonstrates how to work with remote data such as cross-domain JSONP.

(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" } });

Summary

This article discussed about how to work with aggregates with the help of an example of counting the number of items in a column.

Resources for Article:


Further resources on this subject:


Instant Kendo UI Grid [Instant] Practical recipes to learn the Kendo UI Mobile library and its various components for building mobile applications effectively with this book and ebook
Published: July 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


James R. Lamar

James Lamar began work in design over 15 years ago and transitioned into web development in 2007. He is a self-taught programmer with experience in ColdFusion, PHP, and ASP.NET. He has worked in all aspects of software development for companies like FedEx, Yusen/NYK Logistics, and the U.S. Navy Recruiting Command. He also acts as owner and Chief Software Engineer of Nautilus Technology Solutions Inc.

James has always considered himself a novice, but thrives on learning as much as he can about engineering software that is elegant and intuitive.

Books From Packt


jQuery UI Themes Beginner's Guide
jQuery UI Themes Beginner's Guide

Instant Kendo UI Mobile [Instant]
Instant Kendo UI Mobile [Instant]

Learning Kendo UI Web Development
Learning Kendo UI Web Development

Infinispan Data Grid Platform
Infinispan Data Grid Platform

Oracle Enterprise Manager Grid Control 11g R1: Business Service Management
Oracle Enterprise Manager Grid Control 11g R1: Business Service Management

BPEL PM and OSB operational management with Oracle Enterprise Manager 10g Grid Control
BPEL PM and OSB operational management with Oracle Enterprise Manager 10g Grid Control

Middleware Management with Oracle Enterprise Manager Grid Control 10g R5
Middleware Management with Oracle Enterprise Manager Grid Control 10g R5

Instant jQuery Drag-and-Drop Grids How-to [Instant]
Instant jQuery Drag-and-Drop Grids How-to [Instant]


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
S
q
7
c
C
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software