Rest – Kendo UI Grid Datasource and REST API

datasourcegridkendo-uirest

Using the Kendo UI Grid and Datasource, I'm connecting to a REST API. However there are a couple problems being reported:

Unknown DataSource transport type 'json'. Verify that registration
scripts for this type are included after Kendo UI on the page.

kendo.all.js:6621 Uncaught TypeError: Cannot read property 'slice' of
undefined

I've reviewed the Kendo UI Grid and Datasource documentation and as far as I can tell, everything is correct (but obviously it's not since the grid isn't populating with any data).

Here is the web page code:

<!DOCTYPE html>
<html>

<head>
    <title>Kendo UI DataSource Proof of Concept</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2016.1.412/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2016.1.412/styles/kendo.bootstrap.min.css" />
</head>

<body style="margin:100px">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="http://cdn.kendostatic.com/2016.1.412/js/kendo.all.min.js"></script>
    <div class="panel panel-default">
        <div class="panel-body">
            <div id="grid"></div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('#grid').kendoGrid({
                dataSource: {
                    autoSync: true,
                    type: 'json',
                    transport: {
                        read: {
                            url: 'http://cors.io/?u=http://api.lifestylesdiscovery.com/api/evaluation/test/salecomps',
                            dataType: 'json',
                            type: 'GET'
                        }
                    },
                    schema: {
                        data: 'rows'
                    }
                },
                columns: [
                    { field: 'Street' },
                    { field: 'Subdivision' },
                    { field: 'Beds' }
                ]
            });
        })
    </script>

</body>
</html>

Best Answer

use jsonp for type

 type: 'jsonp',

For Cannot read property 'slice' of undefined".

debug in IE and comment the line where it is occouring, or use correct combination of js files. I am using http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js

Related Topic