データ追加時に剣道UIグリッドでページ分割が機能しない

Question

AngularJSアプリで剣道UIグリッドを使用しています。レコードの追加、編集、表示を行っていますが、ページネーションが機能しません。現在はpageSizeを2に設定しています。新しいレコードをデータに追加すると、新しいレコードではなく同じページに表示されます。続き

は剣道UIグリッドを構成するための私の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ディレクティブを削除してくれました。