This is a migrated thread and some comments may be shown as answers.

Grid not working in angular

2 Answers 251 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 14 Oct 2015, 11:55 AM

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.

2 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 14 Oct 2015, 03:20 PM
I did not have kendo-professional installed only core.
0
Viktor Tachev
Telerik team
answered on 16 Oct 2015, 06:33 AM
Hello James,

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


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



Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or