Question

在我的angular-kendo应用程序中，我根本无法显示网格过滤器 - 甚至不是过滤器图标，只是普通的列标题。这是我的HTML：

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

    <div kendo-grid id="grid"
            k-data-source="dataSource"
            k-sortable="true"
            k-on-change="selectedItem = data"
            k-selectable="'row'"
            k-pageable='{ "refresh": true, "pageSizes": 5 }'
            k-filterable="true">
    </div>
    <div>
        <p>{{selectedItem}}</p>
    </div>
    <br/>
    <input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
           data-ng-click="" />
</div>

这是相应的Angular控制器：

'use strict';

angular.module('wizardApp').controller('IntroductionWizardCtrl', ['$scope', '$location', '$rootScope',
    function ($scope, $location, $rootScope) {

        $scope.dataSource = {
            data: [{id: 1, name: "Account Underwriting - Misc App", bu: 50},
                {id: 2, name: "Achieve - Distributed", bu: 43},
                {id: 3, name: "ACT!", bu: 27},
                {id: 4, name: "Actuarial Database", bu: 29},
                {id: 5, name: "Adjustment Invoicing System (AIS)", bu: 34},
                {id: 6, name: "buncy Download", bu: 43},
                {id: 7, name: "Ariba", bu: 27},
                {id: 8, name: "Athena NY", bu: 29},
                {id: 9, name: "Authoria", bu: 34},
                {id: 10, name: "Avenue", bu: 43},
                {id: 11, name: "BC&IT - Services", bu: 27},
                {id: 12, name: "Billing Website", bu: 29},
                {id: 13, name: "Blue Butler", bu: 34},
                {id: 14, name: "BOE External", bu: 43},
                {id: 15, name: "Builders Risk", bu: 27},
                {id: 16, name: "Business Intelligence", bu: 29},
                {id: 17, name: "Care Center", bu: 34}],

                pageSize: 5, serverFiltering: true

        };
        $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;
            }
        };


        $scope.categoryDataSelectedRows=[];

        $scope.categoryData=
            {
        data:
            [{name: "General Application Information"},
            {name: "User Interface configuration description"},
            {name: "Application Architecture"},
            {name: "Database"},
            { name: "Backup & DR"},
            {name: "Design"},
            { name: "Operational data"},
            { name: "Testing"},
            {name: "Application Configuration details"},
            { name: "Application connectivity requirements"},
            {name: "Deployment Requirements"},
            {name: "Application dependencies"},
            {name: "Infrastructure dependencies"},
            { name: "Business value assessment"},
            { name: "Data requirements"},
            {name: "Hosting OS requirements"},
            { name: "License requirements"}], pageSize: 5
    }

        $scope.rowSelectedCategory = function(e) {
            var gridCategory = e.sender;
            var selectedRowsCategory = gridCategory.select();
            for (var i = 0; i < selectedRowsCategory.length; i++) {
                $scope.selectedItemCategory = gridCategory.dataItem(selectedRowsCategory[i]);
                break;
            }
        };
    }
]);

我在Angular之外查看了许多示例，其中Kendo Grid的过滤工作正常。然而，凭借棱角剑侠，我遇到了这个问题。

Answer 1

嗯，事实证明，我的问题在于加载各种css文件的顺序。 bootstrap覆盖了其他一些风格。我花了一段时间来解决这个问题，但现在我的角度 - 剑道网格还可以。谢谢你的帮助！

KendoUI网格 - 过滤器未显示

1 个答案: