angular-kendo grid - a few odd observations

Question

I'm finding a few odd things about angular-kendo grid control: 1) The column headings appear to follow the actual camel-cased field names instead of titles 2) In the pager area I see 2 empty paging buttons,followed by a single "1" button, followed by another 2 empty buttons 3) When the grid first appears - on the button-right I see "NaN - NaN of 5 items"

Anyone knows how to fix any of that, please?

Here is my html:

<div ng-controller="ApplicationGeneralWizardCtrl">
        <h3 class="text-muted">Step 2: Select Application To Describe</h3>

    <div kendo-grid=""
            k-data-source="dataSource"
            k-sortable="true"
            k-groupable="true"
            k-filterable="true"
            k-on-change="selectedItem = data"
            k-selectable="'row'"
            k-pageable='{ "refresh": true, "pageSizes": true }'
            >

    </div>
    <div>
        <p>{{selectedItem}}</p>
    </div>
</div>

Here is my controller:

'use strict';

angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['$scope',
    function ($scope) {
            console.log('Entering ApplicationGeneralWizardCtrl');

        $scope.dataSource = {
            data: [
                { id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
                { id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
                { id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }
            ],
            columns:
                [
                    { "field": "id", "title": "ID"},
                    { "field": "name", "title": "Name"},
                    { "field": "department", "title": "Department"},
                    { "field": "lastShipment", "title": "Last Shipment" }
                ]
        };
        $scope.rowSelected = function(e) {
            var grid = e.sender;
            var selectedRows = grid.select();
            for (var i = 0; i < selectedRows.length; i++) {
                $scope.selectedItem = grid.dataItem(selectedRows[i]);
                break;
            }
        };
    }
]);

Answer 1

Your columns definition needs be part of your grid's configuration instead of part of the configuration for dataSource.

k-columns="[{'field': 'id', 'title': 'ID'}, ... ]"