Paginierung funktioniert nicht im Kendo UI-Raster beim Hinzufügen von Daten

Question

Ich verwende ein Kendo UI-Raster in meiner AngularJS-App. Ich füge Datensätze hinzu, bearbeite und zeige sie an, aber ich kann die Seitennummerierung nicht ausführen. Zur Zeit habe ich die pageSize auf 2 gesetzt und wenn ich den Daten einen neuen Datensatz hinzufüge, wird dieser auf der gleichen Seite anstatt auf einer neuen Seite angezeigt.

Es folgt mein Winkel js Controller-Code des Kendo UI Raster für die Konfiguration:

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

Es folgt mein HTML-Code:

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

Danke für Ihre Hilfe im Voraus.

Answer 1

Das Problem war, ich hatte die Datenquelle sowohl in den mainGridOptions und auch in der Richtlinie K-Datenquelle festgelegt. Ich entfernte die Richtlinie k-Datenquelle und es funktionierte für mich.