Search code examples
asp.netangularjskendo-uiboilerplate

Grid dont have data Kendo UI and AngularJS in ASP.NET MVC


Im using KendoUI, AnduglarJS in ASP.NET MVC 4. Im trying get data and show in grid, but my grid is not showing data. Data is downloaded from db and I have they in js.

list.cshtml

<div class="panel panel-default" ng-controller="app.views.register.list as vm">


<div kendo-grid k-data-source="vm.registers" k-selectable="'row'"
         k-pageable='{ "refresh": true, "pageSizes": true }'
         k-on-change="vm.handleChange(kendoEvent)"
         k-columns='[
         { "field": "type", "title": "Typ"},
         { "field": "status", "title": "Status"},
         { "field": "ip", "title": "IP"},
         { "field": "description", "title": "Opis"},
         { "field": "createdDate", "title": "Data utworzenia", type: "datetime", format: "{0:d}"}         
           ]'>
    </div>

</div>

list.js

(function () {
    var app = angular.module('app');

    var controllerId = 'app.views.register.list';
    app.controller(controllerId, [
        '$scope', '$location', 'abp.services.app.register',
        function ($scope, $location, registerService) {

            var vm = this;
            var localize = abp.localization.getSource('Ebok');
            //kendo.culture("en-EN");
            vm.handleChange = function (kendoEvent) {
                var grid = kendoEvent.sender;
                var selectedData = grid.dataItem(grid.select());
                var id = selectedData.id;

                vm.changeRegister(id);
            }
            vm.registers = new kendo.data.ObservableArray([]);
            registerService.getRegisters({ PageSize: 20 }).success(function (data) {
                vm.registers = new kendo.data.ObservableArray(data.registers);
            });
    }
    ]);
})();

In vm.registers I have data, here is example:

{"type":"dfdgf","status":"dfdrf","ip":"dfdf","description":"cdsdfsdfs666","createdDate":"2014-12-29T12:09:55.16","id":1}

What is wrong?


Solution

  • Problem was in configuration. In file app.js I dont have one line 'kendo.directives'

    var app = angular.module('app', [
            'ngAnimate',
            'ngSanitize',
    
            'ui.router',
            'ui.bootstrap',
            'ui.jq',
    
            'abp',
            'kendo.directives'
        ]);