cross-domain web service request issue - Kendo UI grid

[Vadivel]

we have requirement to call a cross-domain exalead web service. It's working fine with the plain ajax jquery request but its not working with the kendo UI grid. Below is the code, kindly help to resolve the issue.

Ajax jquery code: 

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
  
<div id="grid"></div>
<script>
$( document ).ready(function() {
$.ajax({
    type: 'GET',
    url: 'web service URL',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(responseData, textStatus, jqXHR) 
    {
        console.log(responseData);
    },
    error: function (responseData, textStatus, errorThrown) 
    {
        console.warn(responseData, textStatus, errorThrown);
        alert('CORS failed - ' + textStatus);
    }
});
});
</script>

Kendo UI grid code:

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/Style%20Library/kendo.all.min.js"></script>
  
<div id="grid"></div>
<script>
$( document ).ready(function() {
// The base remote Url
    var base_url = "web service url";
 
    // Create a reusable shared Transport object
    var productTransport = new kendo.data.RemoteTransport({
        read: {
            url: base_url,
            dataType: 'jsonp',  // jsonp is necessary here for cross domain calls, not just json
            type: 'GET'
        }
    });
    console.log(productTransport);
    // Create a reusable shared DataSource object
    var datasource = new kendo.data.DataSource({
        transport: productTransport
    });
     console.log(datasource);
    // This function is data-bound to the flat listview
    
        $("#grid").kendoGrid({
            dataSource: datasource
        });
    
});
</script>

[Kiril Nikolov]

Hello Vadivel,

 

From the provided information it is not possible to tell what exactly is the issue and why the request is not executed. Can you examine the network tab of your developer tools and see what is the error message that you get? Is the request correctly wrapped as JSONP? Would it be possible to extract a runnable sample that we can debug and see what happens?

 

Regards,
Kiril Nikolov
Telerik