Получение работы Kendo Grid

Question

Я упростил это до своих barebones - вытащил любые свойства, которые могут мешать (я могу вернуть их обратно, если хотите), даже указав его на локальный .json - и по-прежнему не получая никаких данных в моя сетка.

Я видел данные в образце, в который я заходил, когда он указывал на api Northwind, так что я знаю, что у меня перекрестился и я уселся.

 <div id="grid"></div> 

Это в моем контроллере:

 $("#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 
      }] 
     }); 

ВЫЗОВ МАСТЕРА он делает это (я не имею никакого контроля над этим):

http://localhost/Wizmo-web/Content/data/Listings.json?$callback=jQuery112103831734413679999_1470962161424&"%"24inlinecount=allpages&"%"24format=json 

Это является возвращающих данных из моих Listings.json (который я гарантировал):

[ 
    { 
     "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", 
    } 
] 

Но моя сетка пуста. Нет ошибок, нет ничего.

Stumped.

Answer 1

Я выгляжу как в вашем контроллере, вы пытаетесь использовать реализацию jQuery для Kendo, а не поддерживаемые угловые директивы.

В сетке пользовательского интерфейса Kendo встроена интеграция с AngularJS с использованием директив, которые официально поддерживаются как часть продукта. Чтобы воспользоваться этой интеграции, необходимо ссылаться на угловые скрипты в вашем приложении и зарегистрировать модуль включения директивы Кендо UI следующим образом:

angular.module("myApp", [ "kendo.directives" ]) 

Таким образом, в вашем контроллере, вместо того, чтобы использовать JQuery $("#grid").kendoGrid(...) найти элемент и добавить объект конфигурации, вы на самом деле собираетесь использовать объект конфигурации на вашей области контроллера:

$scope.mainGridOptions = { 
    //all your config options here 
}; 

Тогда в вашей точке зрения, вместо того, чтобы использовать только <div id="grid"></div> вы на самом деле собираетесь использовать кендо директивы здесь и пройти его конфигурация объект от контроллера:

<kendo-grid options="mainGridOptions"> 
... 

кэндо имеет некоторые довольно хорошую документацию по Угловой реализации here

Answer 2

актуальная проблема иная - конфигурация DataSource включает в себя type: "odata" установку, которая не соответствует серверу ответ, поэтому его следует удалить. С помощью этого параметра экземпляр DataSource Kendo UI не может найти элементы данных в возвращаемом JSON, поэтому строки таблицы не отображаются.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

Вот работоспособный пример без установки type:

http://dojo.telerik.com/ESija

Answer 3

В тот момент я добавляю [ ''] kendo.directives к модулю, все умирает. Нет ошибок, ничего.

Контроллер:

(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>