Pagination does not work in Kendo UI grid after adding data

Question

I am using a Kendo UI grid in my AngularJS app, I am adding, editing and displaying records but I am not able to get the pagination to work. Currently I have set the pageSize to 2 and if I add a new record to the data it shows it on the same page instead of a new one.

Following is my angular js controller code for configuring the Kendo UI grid:

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

Following is my HTML code:

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

Thank you for your help in advance.

Kiran Kadam Kiran Kadam · Accepted Answer · 2016-04-20T13:48:19

The issue was, I had set the data source both in the mainGridOptions and also in the directive k-data-source. I removed the directive k-data-source and it worked for me.

Pagination does not work in Kendo UI grid after adding data

1 Answers