kendo-ui - 如何在 Kendo UI Jquery 中的同一网格中复制粘贴整行

Question

批量编辑时，我们可以将一个单元格的值复制粘贴到其他单元格中。现在想知道天气，我们可以将整行复制粘贴到同一网格中。

找到这个http://www.telerik.com/forums/copy-and-paste-rows-in-kendo-ui-asp-net-mvc-grid但它在网格之间，需要禁用选择和键盘导航，但我需要选择和键盘导航和选择功能。

Answer 1

最简单的方法是在模型级别工作。 IE。识别与您选择的行相对应的数据，然后将该数据附加到数据源。

由于您在评论中提到重复的行标有复选框，因此您可以执行以下操作:

// Items to insert
var items = [];
// For the rows with checked item
$(":checked", grid.tbody).each(function(idx, elem) {
     // Get the row 
     var row = $(elem).closest("tr");
     // Get the item for that row
     var item = grid.dataItem(row);
     items.push(item);
});
// Insert it in the DataSource
for (var i = 0; i < items.length; i++) {
    grid.dataSource.add(items[i]);
}

$(document).ready(function() {
  var grid = $("#grid").kendoGrid({
    dataSource: {
      data: products,
      schema: {
        model: {
          fields: {
            CheckBox: { type: "boolean" },
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "boolean" }
          }
        }
      },
      pageSize: 4
    },
    scrollable: true,
    pageable: true,
    columns: [
      { field: "CheckBox", title:"&nbsp;", template: "<input type='checkbox'/>", width: 30 },
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
      { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
      { field: "Discontinued", width: "130px" }
    ]
  }).data("kendoGrid");

  $("#duplicate").on("click", function() {
    var items = [];
    $(":checked", grid.tbody).each(function(idx, elem) {
      var row = $(elem).closest("tr");
      var item = grid.dataItem(row);
      items.push(item);
    });
    for (var i = 0; i < items.length; i++) {
      grid.dataSource.add(items[i]);
    }
  });
});

html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<button id="duplicate" class="k-button">Duplicate</button>
<div id="grid"></div>