title: How to populate add-row form programmatically for Kendo UI grid (AngularJS)
body: <p>I have an order line grid where I need to be able to open the popup editor form programmatically with the edit form fields pre-populated (using AngularJs).</p>
  
  <p>In the HTML, I have a lineGrid and an addButton, which calls addRow() on the ticketEntryController:</p>
  
  <pre><code>&lt;div id="wrapper" class="container-fluid" ng-controller="ticketEntryController"&gt;
    &lt;div ng-controller="ticketLineController"&gt;
        &lt;div kendo-grid="ticketLineGrid" k-options="getTicketLineGridOptions()"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;button id="addButton" ng-click="addRow()" class="btn btn-primary btn-sm"&gt;Add Row&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the ticketEntryController:</p>
  
  <pre><code>(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);
          }
      }
  })();
  </code></pre>
  
  <p>Here is part of the ticketLineController:</p>
  
  <pre><code>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();
      });
  </code></pre>
  
  <p>Plunker: <a href="http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview" rel="nofollow">http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview</a></p>
  
  <p><strong>When the Add Row button is clicked, the editor popup form opens up, but all fields are empty.  How can I populate the fields (like they are when you click the Edit button for an existing row)?</strong></p>