Kendo Grid с AngularJS не отображается

Question

Я пытаюсь отобразить сетку Kendo внутри приложения AngularJS и не могу его отобразить.

Описание html для отображения сетки. Недавно я добавил параметр k-data-source в html, чтобы попробовать что-то другое.

<div class="col-xs-4"> 
    <div id="pd01" class="panel panel-primary"> 
     <div class="panel-heading"> 
      <span class="panel-title">Open Invoices</span> 
      <span class="panel-controls"></span> 
     </div> 

     <div kendo-grid="vm.grid" k-data-source="vm.gridData" k-options="vm.options"></div> 
    </div> 
</div> 

Вот мой контроллер

(function() { 
    'use strict'; 
    function invoice(invoiceService) { 
     var vm = this; 

     vm.gridData = new kendo.data.DataSource([{ 
      col1: 'data1', 
      col2: 'data2' 
     }, { 
      col1: 'data1', 
      col2: 'data2' 
     }]); 

     vm.options = { 
      dataSource: vm.gridData, 
      editable: true 
     }; 


    } 

    angular.module('app.dashboard.invoice') 
     .controller('Invoice', invoice); 
})(); 

Это все, что я вижу в браузере. При загрузке страницы не отображаются ошибки консоли.

Я уверен, что это что-то простое, но смотрел на него слишком долго.

Answer 1

Я думаю, что вы забыли инициализировать Вашу сетку:

$(document).ready(function() { 
       $("#grid").kendoGrid({ 
        height: 550, 
        sortable: true 
       }); 
      }); 

Читайте об основных использовании сетки на docs