如何以编程方式为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