Разбивка на страницы в сетке интерфейса Kendo после добавления данных не работает

Я использую сетку пользовательского интерфейса Kendo в своем приложении AngularJS, я добавляю, редактирую и отображаю записи, но я не могу заставить нумерацию страниц работать. В настоящее время я установил для pageSize значение 2, и если я добавляю новую запись к данным, она отображается на той же странице, а не на новой.

Ниже приведен мой угловой код js-контроллера для настройки сетки Kendo UI:

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

Спасибо за вашу помощь заранее.