Kendo UI Grid Datasource and REST API

1
votes

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>
3
restkendo-uigriddatasource
Is kendo compatible with jQuery 2.x? – whipdancer

3 Answers

1
votes

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

0
votes

I'd remove the dataSource level type param all-together, according to http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type json is not a supported value

0
votes

It needs a little customisation when querying REST API, try it this way, using a function for schema.data lets you inspect the returned dataset and 'data' expects an array hence error about 'splice' in your case.

      dataSource: {
            type: "json",
            schema: {
               data: function (e) {
                  return e.Results // inspect 'e' as to where your data resides
                }
            },
            serverFiltering: true,
               transport: {
                  read: url,
                  parameterMap: function (options, type) {
                        var paramMap = kendo.data.transports.odata.parameterMap(options);
                        delete paramMap.$format;
                        return paramMap;
                   }
               }
           }