getting Kendo Grid working - angularjs

Question

I've simplified this to its barebones - pulled out any properties that might be interfering (I can put em back in if you like) - even pointing it at local .json - and still getting no data in my grid.
I did see data in the sample that I dropped in, when it was pointing at the Northwind api, so I know I've got my i's crossed and t's dotted.
<div id="grid"></div>
This is in my controller:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: 'Content/data/Listings.json'
}
},
height: 550,
columns: [{
field: "Id",
title: "Id",
width: 240
},{
field: "State",
title: "State",
width: 240
}]
});
The call it makes is this (I have no control over this):
http://localhost/Wizmo-web/Content/data/Listings.json?$callback=jQuery112103831734413679999_1470962161424&"%"24inlinecount=allpages&"%"24format=json
It is returning data from my Listings.json (which I've ensured is valid):
[
{
"Id":557,
"State":"active",
"Title":"Matching Father Son Shirts I Am Your Father Shirt ",
},
{
"Id":558,
"State":"active",
"Title":"Baseball Hoodies Im All About That Base Hooded Swe",
}
]
But my grid is empty.
No errors, no nothing.
Stumped.

Answer 1

I looks like in your controller, you are trying to use the jQuery implementation of Kendo, instead of the supported Angular directives.
The Kendo UI grid features inherent integration with AngularJS using directives which are officially supported as part of the product. To make use of this integration, you need to reference the Angular scripts in your app and register the module incorporating the Kendo UI directives in the following way:
angular.module("myApp", [ "kendo.directives" ])
So in your controller, instead of using jQuery $("#grid").kendoGrid(...) to find the element and add your config object, you are actually going to use a config object on your controller scope:
$scope.mainGridOptions = {
//all your config options here
};
Then in your view, instead of using just <div id="grid"></div> you're actually going to use the Kendo directive here, and pass it the config object from your controller:
<kendo-grid options="mainGridOptions">
...
Kendo has some pretty good documentation on Angular implementation here

Answer 2

The actual problem is different - the dataSource configuration includes a type: "odata" setting, which does not correspond to the server response, so it should be removed. With this setting, the Kendo UI DataSource instance is not able to find the data items in the returned JSON, that's why no table rows are rendered.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type
Here is a runnable example without the type setting:
http://dojo.telerik.com/ESija

Answer 3

The moment I add [ 'kendo.directives' ] to the module, everything dies. No errors, nothing.
Controller:
(function() {
'use strict';
angular
.module('WizmoApp', [ 'kendo.directives' ])
.controller('listingsController', listingsController);
listingsController.$inject = ['$http', '$location', '$stateParams', '$filter', 'toastr', 'DTOptionsBuilder', 'DTColumnDefBuilder', 'listingsService', 'datatableService', 'ngAuthSettings'];
function listingsController($http, $location, $stateParams, $filter, toastr, DTOptionsBuilder, DTColumnDefBuilder, listingsService, datatableService, ngAuthSettings) {
...
index.html:
<script src="Content/vendor/Metronic/global/plugins/jquery.min.js" type="text/javascript"></script>
...
<script src="Content/vendor/Metronic/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="Content/vendor/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="Content/vendor/angular/angular.min.js" type="text/javascript"></script>
<script src="Content/vendor/KendoUI/js/kendo.all.min.js"></script>