Kendo UI Grid foreign key column using Angular directives

Question

I'm trying to make a Kendo Grid that has 2 foreign key columns using the Angular directives for Kendo. I am able to get one to work, but not the other (independent of each other). If I comment one out the other will work and vice versa, but either way only one will work. Abbreviated sample code is below.

invoicesController.js

app.controller('invoicesController', [
    '$scope', '$rootScope', 'config', 'dataFactory', function($scope, $rootScope, config, dataFactory) {
        $rootScope.title = 'Invoices';

        $scope.filterCustomers = [];
        $scope.filterStatuses = [];

        $scope.invoiceGrid = null;

        var _refreshCustomers = function () {
            dataFactory.get(_.string.format('{0}customers', config.apiUrl)).success(function (result) {
                $scope.filterCustomers = _.map(result, function (cust, key) {
                    return {
                        text: cust.name,
                        value: cust.id
                    }
                });
            });
        };

        var _refreshStatuses = function() {
            dataFactory.get(_.string.format('{0}invoicestatuses', config.apiUrl)).success(function(result) {
                $scope.filterStatuses = _.map(result.data, function(status, key) {
                    return {
                        text: status.name,
                        value: status.id
                    }
                });

                _initializeGrid();
            });
        };

        var _refreshData = function () {
            _refreshCustomers();
            _refreshStatuses();
        };

        _refreshData();

        var _initializeGrid = function() {
            $scope.invoiceGrid = {
                dataSource: {
                        transport: {
                            read: _.string.format('{0}invoices', config.apiUrl),
                            },
                    schema: {
                        data: 'data'
                    },
                    pageSize: 15,
                    sort: { field: 'invoiceDate', dir: 'asc' }
                },
                columns: [
                    { title: 'Subject', field: 'subject', type: 'string', width: '30%'},
                    { title: 'Number', field: 'number', width: '12%' },
                    { title: 'Customer', field: 'customer.id', values: $scope.filterCustomers, width: '15%' },
                    { title: 'Status', field: 'status.id', values: $scope.filterStatuses, width: '14%' },
                    { title: 'Total', field: 'invoiceTotal', type: 'number', format: '{0:c2}', width: '10%' },
                    {
                        title: 'Updated', field: 'updatedOn', type: 'date', format: '{0:d}', width: '19%',
                        template: '#=lastUpdated#'
                    }
                ],
                scrollable: false,
                sortable: true,
                filterable: true,
                pageable: true
            };
        }
    }
]);

dataFactory.js (GET method)

return $http({
    url: url,
    method: 'GET',
    data: data,
});

list.html

<div data-kendo-grid data-k-ng-delay="invoiceGrid" data-k-options="invoiceGrid" class="top"></div>

Answer 1

I was able to get this to work using route resolve.

Basically, when you're defining your routes, you can set resolvers. In this case, I'm resolving customers and statuses which you will also see as arguments on the projectsController

app.js (routing config)

// Projects
$routeProvider.when('/projects', {
    templateUrl: '/app/views/projects/list.html',
    controller: 'projectsController',
    resolve: {
        customers: ['customerService', function (customerService) {
            return customerService.getCustomers();
        }],
        statuses: ['projectService', function (projectService) {
            return projectService.getStatuses();
        }]
     }
});

projectsController.js (abbreviated)

app.controller('projectsController', [
    '$scope', '$rootScope', 'config', 'customers', 'statuses', function($scope, $rootScope, config, customers, statuses) {

        // Set the options from the injected statuses (from the route resolver)
        $scope.statusOptions = _.map(statuses.data.data, function(status) {
            return { value: status.id, text: status.name }
        });

    ....

         // Kendo grid column definition
         columns: [
             { title: 'Status', field: 'status.id', values: $scope.statusOptions, width: '15%' },
         ]

}]);