kendo jsonp d7.cc.com

grid/datasource sample for d7.cc.com webapi call this sample must use jsonp as the call is x-domain - not used normally from our own cc.com site.

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<input size=35 type="text" id="searchId" />
<input type="button" id="search"  value="Search"/>
<input type="button" id="clear"  value="Clear"/>

<br/>

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

JavaScript

// jsonp / text/javascript is not the norm - only used here because of x-domain issue using jsfiddle to access d7
// $.ajax is just showing what kendo datasource would use under the covers on a trasport.read action - only for ref
$.ajax({
    url: "http://d7.conveyclassrooms.com/api/engage/getlessons",
    // data: {id:'65fb54f6-cc8a-4d3b-bcaf-00f6a29d3eef'},
    type: "GET",
    //contentType: "application/json; charset=utf-8",
    //dataType: "json",
    contentType: "text/javascript",
    dataType: "jsonp",
    success: function(rtndata) {
        console.dir(rtndata);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log('Status: ' + textStatus);
        console.log('Error: ' + errorThrown);
    }
});

// setup a datasource - could do this within grid, no difference
var sharedDataSource = new kendo.data.DataSource({
    requestStart: function(e) {
        console.log('sharedDataSource request is to be made');
    },
    transport: {
        read: {
            url: "http://d7.conveyclassrooms.com/api/engage/getlessons",
            //data: {id:null},
            type: "GET",
            dataType: "jsonp",
            contentType: "text/javascript"
        }
    },
    pageSize: 5,
    serverPaging: false,
    serverFiltering: false,
    serverSorting: false
});

// several ways to pass data to webapi: 
//Optional data to pass to the remote service configured via transport.read.
//sharedDataSource.transport.options.read.data.id = '65fb54f6-cc8a-4d3b-bcaf-00f6a29d3eef';
//sharedDataSource.read(); // all records
//sharedDataSource.read({id:'65fb54f6-cc8a-4d3b-bcaf-00f6a29d3eef'});
$("#grid").kendoGrid({
    dataSource: sharedDataSource,
    autoBind: false,
    columns: [
        {
        field: "Id",
        title: "Id",
        width: "100px"},
    {
        field: "Name",
        title: "Name"},
    {
        field: "AssessmentType",
        title: "Type",
        width: "100px"}
    ],
    pageable: true,
    selectable: "row",
  ...