title: Kendo UI grid, issue saving new record (AngularJS)
body: <p>I have an order line grid with a custom edit form, whose fields are pre-populated for adding a row.  I thought I had this working based on help I received from this question:
  <a href="https://stackoverflow.com/questions/25651164/how-to-populate-add-row-form-programmatically-for-kendo-ui-grid-angularjs">How to populate add-row form programmatically for Kendo UI grid (AngularJS)</a></p>
  
  <p>However, though it works in the simplified plunker, there are a couple of issues when trying to implement it in a real project.</p>
  
  <p>Here is an updated plunker to show the issues below: 
  <a href="http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview" rel="nofollow">http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview</a></p>
  
  <p>Here is the relevant HTML:</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;
  </code></pre>
  
  <p></p>
  
  <p>Clicking the addButton button calls $scope.addRow on 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: "TEST 123",
              id: 0,
              itemDescr: "new item description",
              cat: "CAM",
              mfg: "ACME",
              mfgPartNo: "ABC123456",
              itmStat2: "N",
              price: 133,
              qty: 1
            };
            var ticketId = 200;
            $scope.$broadcast('AddRow', ticketId, item);
          }
      }
  })();
  </code></pre>
  
  <p>addRow() above broadcasts to $scope.$on in ticketLineController:</p>
  
  <pre><code>(function () {
      'use strict';
      angular.module('app').controller('ticketLineController', ticketLineController);
  
      function ticketLineController($scope) {
          $scope.$on('AddRow', function(event, ticketId, item) {
              console.log("ticketLineController, AddRow: " + item.itemNo);
  
              $scope.ticketId = ticketId;
              $scope.itemForAdd = item;
              $scope.ticketLineGrid.addRow();
          });
  
          $scope.getTicketLineGridOptions = function () {
              return {
                  dataSource: {
                      type: "json", 
                      transport: {
                          read: function (options) {
                            console.log("--- read ---");
                            options.success(ticketLines);
                          },
                          create: function (options) {
                            console.log("--- create ---");
                            ticketLines.push(options.data);
                            options.success(options.data);
                          },
                          update: function (options) {   // Why is it calling "update" for addRow?? 
                            console.log("--- update ---"); 
                            ticketLines.push(options.data); 
                            options.success(options.data);
                          },
                          destroy:function (options) {   // Why is it calling "destroy" for addRow (issue 2)?
                            console.log("--- destroy ---");
                          },
                      },
                      schema: {
                          model: {
                              id: "id",
                              fields: {
                                  id: { type: "string" },
                                  orderId: { type: "number" },
                                  lineNo: { type: "number" },
                                  ...
                              },
                          }
                      },
                      sort: [{ field: "ItemNo", dir: "asc" }],
                      pageSize: 50
                  },
                  ...
                  edit: function (e) {
                      if (e.model.isNew()) {
                          e.model.set("orderId", $scope.ticketId);
                          e.model.set("lineNo", 0);
                          e.model.set("id", $scope.ticketId + "_0");
                          ...
                          e.model.set("qty", 1);
                      }
                      var popupWindow = e.container.getKendoWindow();
                      e.container.find(".k-edit-form-container").width("auto");
                      popupWindow.setOptions({
                          width: 640
                      });
                  },
  </code></pre>
  
  <p><strong>Issue #1: When adding a row, "update" is getting called instead of "create" on the grid's dataSource.</strong></p>
  
  <p><strong>Issue #2: After cancelling out of the edit form, the next time you try to add a row, it for some reason calls "destroy" after the "update"</strong>  To reproduce:
  1) Click Add Row
  2) Click Cancel in the edit form
  3) Click Add Row again
  4) Click Update</p>