如何以編程方式爲Kendo UI網格（AngularJS）填充添加行窗體

Question

我有一個訂單線網格，我需要能夠通過編輯窗體字段預先填充（使用AngularJs）以編程方式打開彈出窗體編輯窗體。

在HTML，我對ticketEntryController一個lineGrid和Add按鈕，它調用addRow（）：

<div id="wrapper" class="container-fluid" ng-controller="ticketEntryController"> 
    <div ng-controller="ticketLineController"> 
     <div kendo-grid="ticketLineGrid" k-options="getTicketLineGridOptions()"></div> 
    </div> 
    <button id="addButton" ng-click="addRow()" class="btn btn-primary btn-sm">Add Row</button> 
</div> 

這裏是ticketEntryController：

(function() { 
    'use strict'; 
    angular.module('app').controller('ticketEntryController', ticketEntryController); 

    function ticketEntryController($scope) { 
     $scope.lineGrid = {}; 
     $scope.addRow = function() { 
      var item = { itemNo: 'TEST123', itemDescr: 'Some description' }; 
      $scope.$broadcast('AddRow', item); 
     } 
    } 
})(); 

這裏是ticketLineController的一部分：

function ticketLineController($scope) { 
    $scope.$on('AddRow', function(event, item) { 
     console.log("ticketLineController, AddRow: " + item.itemNo); 
     $scope.itemNo = item.itemNo; 
     $scope.itemDescr = item.itemDescr; 
     $scope.ticketLineGrid.addRow(); 
    }); 

Plunker：http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview

單擊添加行按鈕時，編輯器彈出窗體打開，但所有字段都是空的。我如何填充字段（就像當您單擊現有行的編輯按鈕時那樣）？

Answer 1

我想出如何去預先爲您填充一排，雖然我不知道這是必然的最好方式做到這一點，但它完成這項工作 - 我對AngularJs更熟悉，與Kendo UI不太一樣。

Kendo API允許您更改/設置您正在添加的新項目的唯一位置在edit event中，但是當您調用addRow時，我無法看到將自己的對象發送到事件的方式你需要在控制器中引用一個名爲itemForAdd的共享對象。在您的控制器中調用addRow()之前，您需要將itemForAdd對象設置爲您要預先填充表單的實際對象。

var itemForAdd = {}; 
    $scope.$on('AddRow', function(event, item) { 
     // save reference to item to use for pre-population 
     itemForAdd = item; 
     $scope.ticketLineGrid.addRow(); 
    }); 

現在在edit事件劍道API發出填充，您可以在模型項目從所選項目的項目。這不是必需的，但我也想清除我使用的對象，所以在保存和取消事件中，我清除共享的itemForAdd對象。

  edit: function (e) { 
       if (e.model.isNew()) { 
        e.model.set("itemNo", itemForAdd.itemNo); 
        e.model.set("itemDescr", itemForAdd.itemDescr); 
       } 

       var popupWindow = e.container.getKendoWindow(); 
       e.container.find(".k-edit-form-container").width("auto"); 
       popupWindow.setOptions({ 
        width: 640 
       }); 
      }, 
      save: function(e) { 
       if (e.model.isNew()) { 
       // clear out the shared object 
       itemForAdd = {}; 
       } 
      }, 
      cancel: function(e) { 
       if (e.model.isNew()) { 
       // clear out the shared object 
       itemForAdd = {}; 
       } 
      } 

通過以前的更改，您希望的功能大多可用，但編輯彈出窗口中的表中的數據不會顯示更新的值。這是因爲Kendo數據綁定顯然不知道他們必須更新。我無法弄清楚如何完成這項工作，所以我只是使用該表的AngularJs樣式綁定（您有+=itemNo=+），以便表中的值根據模型對象中的更改進行更新：

   <tbody> 
        <tr> 
         <td>{{dataItem.itemNo}}</td> 
         <td>{{dataItem.itemDescr}}</td> 
         <td>{{dataItem.cat}}</td> 
         <td>{{dataItem.mfg}}</td> 
         <td>{{dataItem.mfgPartNo}}</td> 
        </tr> 
       </tbody> 

但在這一點上多了一個問題，只有itemNo正在更新，而不是itemDescr，那是因爲itemDescr被設置爲您的網格配置editable: false，所以我不得不把它改爲editable: true

     fields: { 
          id: { type: "string", editable: false }, 
          itemDescr: { type: "string", editable: true }, 
          ... 
         }, 

最後，這是一個更新了我的更改：http://plnkr.co/edit/rWavvMh4dRFAsJjuygQX?p=preview