剑道UI电网，节能问题的新纪录（AngularJS） [英] Kendo UI grid, issue saving new record (AngularJS)

问题描述

我有一个自定义编辑表单，其字段是pre-填充添加一行订单行网格。我原本以为根据我从这个问题获得了帮助这方面的工作：
<一href=\"https://stackoverflow.com/questions/25651164/how-to-populate-add-row-form-programmatically-for-kendo-ui-grid-angularjs\">How填充添加行编程的形式为剑道UI网格（AngularJS）

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: How to populate add-row form programmatically for Kendo UI grid (AngularJS)

不过，虽然它工作在简化plunker，有一对夫妇的问题时，试图实现它在一个真正的项目。

However, though it works in the simplified plunker, there are a couple of issues when trying to implement it in a real project.

下面是一个更新的plunker显示下面的问题：
http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=$p$pview

Here is an updated plunker to show the issues below: http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview

下面是相关的HTML：

Here is the relevant HTML:

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

点击Add按钮按钮呼吁ticketEntryController $ scope.addRow：

Clicking the addButton button calls $scope.addRow on the ticketEntryController:

(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);
        }
    }
})();

addRow（）以上广播至$范围，ticketLineController美元：

addRow() above broadcasts to $scope.$on in ticketLineController:

(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
                    });
                },

问题＃1：当添加行，更新获取调用，而不是对电网的数据源创造

问题2：抵消编辑表单后，下次尝试更新后添加一行时，它由于某种原因，呼吁消灭：要重现：
1）点击添加行
2）编辑表单单击取消
3）再次单击添加行
4）单击更新

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" To reproduce: 1) Click Add Row 2) Click Cancel in the edit form 3) Click Add Row again 4) Click Update

推荐答案

我从Telerik的这个听见后面，更新是被调用，而不是创造的原因是，id字段必须为空新记录（= 0整数或字符串ID字段）。一旦我固定的，这两个问题解决了。

I heard back from Telerik on this, and the reason "update" was being called instead of "create" is that the id field must be empty for a new record (=0 for integer or "" for string id fields). Once I fixed that, both issues were resolved.

在一个相关的说明，记录从服务器POST（加记录）返回必须包含填充id字段，以便后续的编辑所说的更新，而不是在网格中创造。

On a related note, the record returned from the server POST (to add record) must contain a populated id field, so that subsequent edits call the "update" instead of "create" in the grid.

这篇关于剑道UI电网，节能问题的新纪录（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！