如何在Kendo UI Jquery中的同一网格中复制粘贴整个行 [英] How to copy paste an entire row with in the same grid in Kendo UI Jquery

问题描述

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

We can copy paste the value of a cell into other cells when we are batch editing . Now want to know weather we can copy paste an entire row with in the same grid.

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

Found this http://www.telerik.com/forums/copy-and-paste-rows-in-kendo-ui-asp-net-mvc-grid but its between grids and requires selection and keyboard navigation to be disabled, but i need selection and keyboard navigation and selection functionality.

推荐答案

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

The easiest way is working at model level. I.e. identify the data corresponding to the row that you select and then append that data to the datasource.

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

Since you mention in a comment that the rows being duplicated are marked with a checkbox, what you can do is:

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

这篇关于如何在Kendo UI Jquery中的同一网格中复制粘贴整个行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！