Как заполнить форму add-row программно для сетки пользовательского интерфейса Kendo (AngularJS)

Question

У меня есть сетка строки заказа, где я должен иметь возможность открывать форму редактора всплывающих окон программно с полями поля редактирования, предварительно заполненными (используя AngularJs).

В HTML, у меня есть lineGrid и AddButton, который вызывает addRow() на ticketEntryController:

<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.

Единственное, что 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