wie zeige ich immer kendo grid default data row am ende der datenquelle angularjs

Question

wie zeige ich immer eine standard dateneingabe reihe am ende der datenquelle in kendo grid ??

Ich möchte jederzeit ein Kendo-Raster mit der Eingabereihe am Raster unten haben. Wenn ich Daten eingeben und die Eingabetaste drücken, sollten die Daten von oben nach unten in das Raster eingefügt werden, aber die Standardzeile für die Dateneingabe sollte unten bleiben.

Unten ist die Rasterinitialisierung. Ich habe Angularjs/Javascript mit Kendo Grid verwendet.

//-> Grid Sample data for demo purposes 

     var s1 = []; 

     //@@@@@@@@@@@@@@@@@@@@@@@@@@ 

     //-> Grid Start 


     var configAddPaymentsEnter = {}; 

     configAddPaymentsEnter.resizable = true 

     configAddPaymentsEnter.sortable = true; 

     configAddPaymentsEnter.pageable = false; 
     //{ 
     // input: true, 
     // numeric: false 
     // }; 
     configAddPaymentsEnter.editable = 
     { 
      createAt: 'bottom' 
     }; 

     configAddPaymentsEnter.columns = [ 

       { 
        field: "ConnectionReference", 
        attributes: { 
         "navi-text": "" 
        }, 
        headerTemplate: 'Connection Reference', 
        template: '<input ng-keydown="AA(this,$event)" type ="text" ng-model="dataItem.ConnectionReference" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />', 
        width: "130px" 
        // ,aggregates: ["count"], footerTemplate: "Total Count: #=count#" 
       }, 
       { 
        field: "ContractNumber", 
        attributes: { 
         "navi-text": "" 
        }, 
        headerTemplate: 'Contract Number', 
        template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ContractNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />', 
        width: "130px" 
       }, 
        { 
         field: "Amount", 
         attributes: { 
          "navi-text": "" 
         }, 
         headerTemplate: 'Amount', 
         template: '<input ng-keydown="AA(this,$event)" kendo-numeric-text-box type ="text" class="k-fill text-right aa" ng-model="dataItem.Amount" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />', 
         width: "130px" 

         // ,aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" 
        }, 
        { 
         field: "ReferenceNumber", 
         attributes: { 
          "navi-text": "" 
         }, 
         headerTemplate: 'Reference Number', 
         template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ReferenceNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />', 
         width: "130px" 
        } 
        //, 
        //{ 
        // field: "RowIndex", 
        // attributes: { 
        //  "navi-text": "" 
        // }, 
        // headerTemplate: 'RowIndex', 
        // template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.RowIndex" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />', 
        // width: "130px" 
        //} 
     ]; 


     configAddPaymentsEnter.scrollable = true; 

     configAddPaymentsEnter.dataSource = new kendo.data.DataSource({ 
      data: [s1], 
      //group: { 
      // field: "ConnectionReference", aggregates: [ 
      //  { field: "ConnectionReference", aggregate: "count" }, 
      //  { field: "Amount", aggregate: "sum" } 
      // ] 
      //}, 

      //aggregate: [{ field: "ConnectionReference", aggregate: "count" }, 
      //    { field: "Amount", aggregate: "sum" }],    

      schema: { 
       model: { 
        id: "ID", 
        fields: { 

         'ConnectionReference': { editable: true, type: "number" }, 
         'ContractNumber': { editable: true, type: "number" }, 
         'Amount': { editable: true, type: "number" }, 
         'ReferenceNumber': { editable: true, type: "number" } 
         //, 
         // 'RowIndex': { editable: false, type: "number" } 


        } 
       } 
      }, 
      pageSize: 5000, 

     }); 

     $scope.dgGridAddPaymentsEnter = new DataGrid(); 
     $scope.dgGridAddPaymentsEnter.options(configAddPaymentsEnter); 

     $scope.Init = function (arg) { 
      $scope.dgGridAddPaymentsEnter.Init(arg); 
     }; 
     $scope.Init = function (arg) { 
      $scope.dgGridAddPaymentsEnter.Init(arg); 
     }; 

Answer 1

Dieses 'Wie' würde beispielsweise hilfreich sein: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/add-row-when-tabbed-out-of-last-row

Answer 2

Sie können versuchen, die Sperren Option von Kendo Grid UI verwenden.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locking

Aber leider eingefrorene Reihen sind nicht so weit im Moment unterstützt, wie ich weiß. Die beste Technik wäre, die eingefrorenen Daten in die Fußzeile des Rasters einzufügen und alle Änderungen an den Datenwerten manuell zu synchronisieren.