This is a migrated thread and some comments may be shown as answers.

cross-domain web service request issue - Kendo UI grid

1 Answer 136 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vadivel
Top achievements
Rank 1
Vadivel asked on 24 Nov 2015, 12:53 PM

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>

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 26 Nov 2015, 08:32 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Vadivel
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or