jpllosa/kendo-grid-copy-text.html

## kendo-grid-copy-text.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo Grid Copy Text Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<ul id="context-menu">
  <li id="copyText" style="width: 180px">
    <input id="valueText"></input>
    <span id="closeValueText" class="k-icon k-i-close"></span>
  </li>
</ul>

<script>
$(document).ready(function() {
  $("#grid").kendoGrid({
      selectable: "multiple row",
      allowCopy: true,
      columns: [
          { field: "productName" },
          { field: "category" }
      ],
      dataSource: [
          { productName: "Tea", category: "Beverages" },
          { productName: "Coffee", category: "Beverages" },
          { productName: "Ham", category: "Food" },
          { productName: "Bread", category: "Food" }
      ]
  });

  var closeContextMenu = false;

  var contextMenu = $("#context-menu").kendoContextMenu({
      target: "#grid",
      filter: "td",
      close: function(e) {
          if (!closeContextMenu) {
              e.preventDefault();
          }
      },
      open: function(e) {
          var cell = e.target;
          var row = $(cell).parent()[0];
          var grid = $("#grid").data("kendoGrid");
          var itemId = e.item.id;

          var cellText = cell.innerText;

          $(e.item).find("#valueText").val(cellText);

          closeContextMenu = false;
      }
  }).data("kendoContextMenu");

  $("#closeValueText").on("click", function(e) {
      closeContextMenu = true;
      contextMenu.close();
  });
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Kendo Grid Copy Text Example</title>

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
	</head>
	<body>

	<div id="grid"></div>
	<ul id="context-menu">
	<li id="copyText" style="width: 180px">
	<input id="valueText"></input>
	<span id="closeValueText" class="k-icon k-i-close"></span>
	</li>
	</ul>

	<script>
	$(document).ready(function() {
	$("#grid").kendoGrid({
	selectable: "multiple row",
	allowCopy: true,
	columns: [
	{ field: "productName" },
	{ field: "category" }
	],
	dataSource: [
	{ productName: "Tea", category: "Beverages" },
	{ productName: "Coffee", category: "Beverages" },
	{ productName: "Ham", category: "Food" },
	{ productName: "Bread", category: "Food" }
	]
	});

	var closeContextMenu = false;

	var contextMenu = $("#context-menu").kendoContextMenu({
	target: "#grid",
	filter: "td",
	close: function(e) {
	if (!closeContextMenu) {
	e.preventDefault();
	}
	},
	open: function(e) {
	var cell = e.target;
	var row = $(cell).parent()[0];
	var grid = $("#grid").data("kendoGrid");
	var itemId = e.item.id;

	var cellText = cell.innerText;

	$(e.item).find("#valueText").val(cellText);

	closeContextMenu = false;
	}
	}).data("kendoContextMenu");

	$("#closeValueText").on("click", function(e) {
	closeContextMenu = true;
	contextMenu.close();
	});
	});
	</script>
	</body>
	</html>