0

私の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;
            }
        };
    }
]);

Kendo Grid でフィルタリングが正常に機能している、Angular 以外の多くの例を見てきました。しかし、angular-kendo では、この問題が発生しています。

4

1 に答える 1

0

結局のところ、私の問題は、さまざまな css ファイルがロードされる順序にありました。ブートストラップは他のスタイルを上書きしていました。これを整理するのにしばらく時間がかかりましたが、今では角度のある剣道グリッドは問題ありません。私を助けてくれてありがとう！

于 2014-04-01T22:08:36.237 に答える