如何在相同的网格中复制粘贴整个行的Kendo UI Jquery

Question

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

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

Answer 1

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

由于您在注释中提到要复制的行被标记为复选框，所以您可以做的是：

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

​