Grid not working in angular

[James]

I am trying to display an Kendo Grid inside an AngularJS application and can not get it to display.

Here is the html for displaying the grid. I just recently added the k-data-source option in the html to try something different.

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

 

Here is my controller.

(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);
})();

I'm sure it is something simple but have been looking at it way too long now.

[James]

I did not have kendo-professional installed only core.

[Viktor Tachev]

Hello James,

In order to use the grid widget with angular you should follow the approach illustrated in the following online demo:

• http://demos.telerik.com/kendo-ui/grid/angular

You can also see a simplified version of it in the dojo sample below:

• http://dojo.telerik.com/eZucO/2

Regards,
Viktor Tachev
Telerik