Вставка новой строки в сетку приводит к дублированию строки

Question

У меня есть сетка, в которой первая строка всегда будет пустой строкой, в которой вы можете выбрать фамилию из многоколоночного списка, после того, как вы выберете того человека, которого найдете, он вставит эту запись в сетку, а затем снова - добавляет пустую строку, и вы можете продолжить добавление записей в сетку.

Огромная проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю фамилию из выпадающего списка, она добавляет эту запись, но затем она добавляет новую строку (как и ожидалось), но эта строка содержит недавно добавленные записи фамилии в новой пустой строке ...

Вот снимок экрана перед добавлением новой записи

и вот снимок экрана после добавления новой записи

Кто-нибудь знает, как решить эту проблему и какова ее причина?

function AddNewRow() {
  let grid = $("#GridList").data("kendoGrid");
  grid.dataSource.insert(0, {
    CustomerID: null,
    FirstName: "",
    LastName: "",
    Address: "",
    City: "",
    Zip: ""
  });
}

var junkData = [{
    "FirstName": "Ben",
    "LastName": "abc",
    ID: 1
  },
  {
    "FirstName": "Bob",
    "LastName": "def",
    ID: 2
  },
  {
    "FirstName": "Joe",
    "LastName": "ghi",
    ID: 3
  },
  {
    "FirstName": "Clarice",
    "LastName": "jkl",
    ID: 4
  },
];

function LNameEditor(container, options) {
  let combobox = $('<input data-text-field="LastName" data-value-field="LastName" data-bind="value:' + options.field + '" />')
    .appendTo(container)
    .kendoMultiColumnComboBox({
      dataTextField: "LastName",
      height: 300,
      columns: [{
        field: "LastName",
        title: "Last Name",
        width: 100
      }],
      filter: "startswith",
      filterFields: ["LastName"],
      dataSource: {
        data: junkData
      },
      change: function(e) {
        let items = e.sender._data()[0];

        let grid = $("#GridList").data("kendoGrid");
        grid.dataSource.insert(1, {
          CustomerID: items.ID,
          FirstName: items.FirstName,
          LastName: items.LastName,
          Address: items.Address,
          City: items.City,
          Zip: items.Zip,
        });

      },
      select: function(e) {}
    });
}


var readonlyEditor = function(container, options) {
  let gridWidget = $("#GridList").data("kendoGrid");
  gridWidget.closeCell();
};

var gridData = [{
    "CustomerID": 3,
    "FirstName": "The Skipper",
    "LastName": "Gilligan",
    "Address": "1 Main St.",
    "City": "Toledo",
    "Zip": "123456"
  },
  {
    "CustomerID": 4,
    "FirstName": "Archie Bunker",
    "LastName": "Edith Bunker",
    "Address": "2 South St.",
    "City": "Memphis",
  }
];

function LoadGrid() {
  $("#GridList").kendoGrid({
    dataSource: {
      data: gridData
    },
    schema: {
      model: {
        fields: {
          CustomerID: {
            type: "number",
            editable: false
          },
          CustomerFirstName: {
            type: "string"
          },
          CustomerLastName: {
            type: "string"
          },
          CustomerAddress1: {
            type: "string"
          },
          City: {
            type: "string"
          },
          Zip: {
            type: "string"
          }
        },
      }
    },
    filterable: {
      mode: "row"
    },
    columns: [{
        title: "<input id='checkAll', type='checkbox', class='check-box' />",
        template: "<input name='Selected' class='checkbox' type='checkbox'>",
        width: "30px"
      },
      {
        field: "CustomerID",
        title: "CustomerID",
        hidden: false,
        headerAttributes: {
          "class": "wrap-header"
        },
        editor: readonlyEditor
      },
      {
        field: "LastName",
        title: "Last Name",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: LNameEditor,
        template: "#=LastName #"
      },
      {
        field: "FirstName",
        title: "Name",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: readonlyEditor
      },
      {
        field: "Address",
        title: "Address",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: readonlyEditor
      },
      {
        field: "City",
        title: "City",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: readonlyEditor
      },
      {
        field: "Zip",
        title: "Zip",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: readonlyEditor
      }
    ],
    editable: true,
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    change: function(e) {
      // Function call goes here
      var detailRow = this.dataItem(this.select());
      var optionID = detailRow.get("CustomerID")
    },
    height: 400
  });

  AddNewRow();
}

$(document).ready(function() {

  LoadGrid();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" />

<div id="MyDiv">
  <div id="GridList" tabindex="-1"></div>
</div>

Answer 1

Здесь есть 2 проблемы:

1. Вы не очищаете / сбрасываете "пустую" строку, но я думаю, что вы думаете, что это так. В событии изменения ComboBox все, что вы делаете, это добавляете новую строку с индексом 1, и все ... вы оставляете одну строку 0, что включает в себя установку LastName на то, что было выбрано. Вам необходимо сбросить строку 0. Это можно сделать, удалив текущую строку 0 и заменив ее «чистой» строкой 0. Для этого можно использовать помощник AddNewRow ().
2. Вы фактически не выбираете данные из элемента, выбранного в ComboBox. В событии изменения ComboBox вы просто получаете первый элемент из источника данных ComboBox, а НЕ выбранный элемент. Вы действительно хотите, чтобы выбранный элемент вместо элемента 0.

Если вы обновите событие изменения примерно так, оно должно работать лучше:

change: function(e) {
    // THIS IS NOT THE DATA YOU WANT.
    // e.sender is the ComboBox so this will always be "abc"(index 0 of the ComboBox dataSource) rather than the selected item.
    // let items = e.sender._data()[0];
    let items = e.sender._data()[e.sender.selectedIndex];

    let grid = $("#GridList").data("kendoGrid");
    grid.dataSource.insert(1, {
      CustomerID: items.ID,
      FirstName: items.FirstName,
      LastName: items.LastName,
      Address: items.Address,
      City: items.City,
      Zip: items.Zip,
    });

    // Need to "clear" the "empty" row, which is always row 0.
    // We can do this by removing and re-adding the row(among other ways).
    let dataItem = grid.dataSource.at(0);
    grid.dataSource.remove(dataItem);
    AddNewRow();
  }

Рабочий пример: https://dojo.telerik.com/@Stephen/EnIruLOm