添加數據后，分頁在Kendo UI網格中不起作用

Question

我在AngularJS應用程序中使用Kendo UI網格，正在添加，編輯和顯示記錄，但無法使分頁正常工作。 當前，我已將pageSize設置為2，並且如果我向數據添加新記錄，它將在同一頁而不是新頁上顯示它。

以下是用於配置Kendo UI網格的我的angular js控制器代碼：

$scope.keyPersonList = new kendo.data.ObservableArray([
{person1: 'Kiran', policyStatusID: 1 },
{person1: 'Kadam', policyStatusID: 2 }]);

$scope.mainGridOptions = {
            dataSource: {
                pageSize: 2,
                schema: {
                    model:
                        {
                            id: "id",
                            fields: {
                                person1: { editable: true, type: "string" },
                                policyStatusID: { editable: true, valuePrimitive: true }
                            }
                        }
                }
                //total: 10,//function () { return $scope.keyPersonList.length; },
                //serverPaging: false,
                //serverSorting: false
            },
            selectable: "row",
            //toolbar: kendo.template(angular.element("#toolbarTemplate").html()),
            toolbar: '<button class="btn btn-default mrn-10-lft" id="btnAddNewPerson" name="btnAddNewPerson" type="button" role="button" ng-click="addNewPerson($event)">Add New<span class="glyphicon glyphicon-plus color-green pad-10-lt"></span></button>',
            sortable: true,
            pageable: {
                previousNext: true,
                numeric: true,
                messages: {
                    empty: "No items",
                    display: "{2} items",
                    pageSizes: true
                }
            },
            height: 400,
            columns: [
                {
                    hidden: true,
                    field: "id"
                }, {
                    field: "person1",
                    title: "Person 1",
                    width: "200px",
                    type: "string",
                    validation: {
                        required: true
                    }
                }, {
                    field: "policyStatusID",
                    title: "Policy Status",
                    width: "75px",
                    editor: function (container, options) {
                        var input = $('<input id="ctrlPolicyStatus" name="policyStatusID" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '" k-ng-model="policyStatusID">');
                        input.appendTo(container);

                        // initialize a dropdownlist
                        input.kendoDropDownList({
                            dataSource: dropDownDataSource,
                            valuePrimitive: true
                        }).appendTo(container);
                    },
                    validation: {
                        required: true
                    }
                },
                {
                    command:
                        [{ text: "customDelete", className: "btn-person btn-person-Delete", click: deletePersonData },
                        { text: "customArchive", className: "btn-person btn-person-archive", click: archivePersonData },
                        { text: "customUnarchive", className: "btn-person btn-person-unarchive", click: unArchivePersonData }],
                    title: "",
                    width: "40px"
                }
            ],
            editable: true
        };

以下是我的HTML代碼：

        <kendo-grid k-options="mainGridOptions" id="grdKeyPeople"
                k-data-source="keyPersonList"
                k-on-change="selected = data">
    </kendo-grid>

提前謝謝你的幫助。

Answer 1

問題是，我既在mainGridOptions中也在指令k-data-source中設置了數據源。 我刪除了指令k-data-source，它對我有用。