Question

我有一个带有自定义编辑表单的订单行网格，其字段已预先填充以添加行。根据我从这个问题收到的帮助，我以为我有这个工作： How to populate add-row form programmatically for Kendo UI grid (AngularJS)

然而，尽管它在简化的plunker中有效，但在尝试在实际项目中实现它时会遇到一些问题。

这是一个更新的plunker，用于显示以下问题： http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview

以下是相关的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>

单击addButton按钮调用ticketEntryController上的$ scope.addRow：

(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中的$ scope。$ on：

(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：添加行时，会在网格的dataSource上调用“update”而不是“create”。

问题＃2：取消编辑表单后，下次尝试添加行时，由于某种原因，在“更新”之后调用“destroy”要重现： 1）单击“添加行” 2）单击编辑表单中的“取消” 3）再次单击“添加行” 4）单击“更新”

Answer 1

我从Telerik那里听到了回复，并且调用“update”而不是“create”的原因是新记录的id字段必须为空（整数为= 0或字符串id字段为“”）。一旦我解决了这个问题，两个问题都得到了解决。

在相关说明中，从服务器POST（添加记录）返回的记录必须包含填充的id字段，以便后续编辑在网格中调用“update”而不是“create”。

Answer 2

我有完全相同的问题。实际上ID字段是在我的数据库中自动生成的，只需将新创建的id分配回ViewModel，就可以解决问题，如下所示：

        dbContext.Shipping.Add(entity);
        dbContext.SaveChanges();

        //int newID = entity.Id;
        ShippingViewModel.Id = entity.Id;

希望这会有所帮助。

Kendo UI网格，发布保存新记录（AngularJS）

2 个答案: