Question

我正在尝试将Kendo UI集成到AngularJS中。我遇到过一个我似乎无法解决的问题。我是AngularJS的新手，我尽量遵循这些指导方针。

手头的问题是我无法获得对我的Kendo UI网格的引用。我已经经历了几个类似的SO问题，但似乎都没有解决这个问题。我的代码的主要区别在于我使用的是controllerAs而不是$ scope。

Datagrid控制器：

'use strict';

angular
    .module('ayotaWebFeApp.datagrid')
    .controller('DataGridController', DataGridController);

DataGridController.$inject = ['$scope','$routeParams', 'datagriddataservice'];

function DataGridController($scope, $routeParams, dataservice) {
    console.info('DataGridController instantiated.');
    var vm = this;
    vm.grid = {};
    vm.dataTitle = $routeParams.datatype;

    activate();

    $scope.$on('kendoWidgetCreated', function(event, widget) {
        console.log('kendowidgetcreated event: ', event);
        console.log('kendowidgetcreated widget: ', widget);

        $scope.$apply();
    });

    function activate() {
        console.info('Activate was called.');
        return getDataFields().then(function() {
            console.info('Loaded data fields for data type :'+$routeParams.datatype);
        });
    }

    function initGridOptions(columnSpec) {
        var restURL = '/api/data';
        if($routeParams.ups) {
            restURL += '/UPS/' + $routeParams.ups;
        } else {
            restURL += '/adm';
        }
        restURL += '/' + $routeParams.historical;
        restURL += '/' + $routeParams.datatype;

        console.info('Data REST url : ', restURL);
        console.info('fields: ', columnSpec);
        vm.dataGridOptions = {
            name: 'grid',
            columns : columnSpec['columns'],
            dataSource: {
            type: 'json',
            transport: {
                read: 'http://localhost:57713'+restURL
            },
            schema: {
                model: {
                fields : columnSpec['fields']
                }
            }
            },
            sortable: true,
            filterable: true,
            scrollable: true,
            reorderable: true,
            resizable: true,
            selectable: 'single row',
            columnMenu: true,
            pageable: {
            refresh: true,
            buttonCount: 5
            },
            dataBound: onDataBound,
            height: '100%'
        };
        console.info('vm.dataGridOptions : ', vm.dataGridOptions);
        console.info('scope after datagridoptionsloaded: ', $scope);
        console.info('vm.grid: ', vm.grid);
        console.info('scope.vm.grid: ', $scope.vm.grid);
    }

    function getDataFields() {
        return dataservice.getDataFields($routeParams.datatype)
            .then(function(data) {
                initGridOptions(data);
            });
    }

    function onDataBound(ev) {
        console.log('DATABOUND !');
        //vm.grid = ev.sender;
        var gh = $('.datagrid-grid').find('.k-grid-header');
        var gc = $('.datagrid-grid').find('.k-grid-content');
        //var rightPaddingHeader = gh.css("padding-right");
        gh.hide();
        gh.css('padding-right', '0px');
        gc.css('overflow-y', 'auto');
        gh.show();

        //resizeGrid();

        //unbind event
        vm.grid.unbind('dataBound');
    }

    function resizeGrid() {
        console.log('vm.grid.dataSource: ', vm.grid.dataSource);
        // trigger layout readjustment
        vm.grid.resize();
        // force layout readjustment
        vm.grid.resize(true);

        //set new pagesize according to content height to avoid inner scrollbars
        var gridContentWidget = $('.datagrid-grid .k-grid-content');
        console.info('gridContentWidget.height(): ', gridContentWidget.height());
        var rowHeight = $('.datagrid-grid .k-grid-content tr').first().height();
        var newPageSize = Math.floor(gridContentWidget.height() / rowHeight);
        console.info('Setting dataSource to new pageSize: ', newPageSize);
        if(newPageSize != vm.grid.dataSource.pageSize())
            vm.grid.dataSource.pageSize(newPageSize);

        console.info('DataSource pageSize after set: ', vm.grid.dataSource.pageSize);
    }

}

和相应的html

<div class="datagrid-container">
<h2>{{vm.dataTitle}}</h2>

  <div class="datagrid-grid">
    <div kendo-grid="vm.grid" 
     k-options="vm.dataGridOptions" 
     k-ng-delay="vm.dataGridOptions" 
     datagrid-resize />
  </div>
</div>

只有onDataBound函数才能通过事件发送者获得引用。任何建议都非常感谢。

Answer 1

试试这个：

over

我还没有找到一个不错的方法来获取网格引用而不会抛出JQuery，但这样做会很快而且很脏。

AngularJS中未定义Kendo UI Grid引用

1 个答案: