New to Kendo UI for jQuery? Download free 30-day trial

Copy Entire Row by Using the ContextMenu

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version 2019.1.220

Description

How can I copy the contents of a row in the Kendo UI Grid by using a Kendo UI ContextMenu?

Solution

  1. Include the clipboard.js library in your project.

         <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
    
  2. When you declare the Kendo UI ContextMenu, target the row by using "tr[role='row']".

  3. During the select even of the ContextMenu:

    1. Reference the Kendo UI Grid.
    2. Get the dataItem from the target row.
    3. Specify the text which you want to copy by using dataItem.
    4. If the item.id is "copyText", return a new Clipboard object which returns the dataItem text.

            $("#context-menu").kendoContextMenu({
                target: "#grid",
                filter: "tr[role='row']",  //2
                select: function (e) {  //3
                    var grid = $("#grid").data("kendoGrid");  //a
                    var model = grid.dataItem(e.target);  //b
                    var rowText = model.OrderID + ", " + model.Freight + ", " + model.OrderDate + ", " + model.ShipName + ", " + model.ShipCity;  //c
      
                    if (e.item.id === 'copyText') {  //d
                        new Clipboard('#copyText', {
                            text: function (trigger) {
                                return rowText;
                            }
                        });
                    };
                }
            });
      

The following example demonstrates the full implementation of the suggested approach.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

    <div id="grid"></div>
    <ul id="context-menu">
      <li id="copyText">Copy Text</li>
    </ul>

    <script>
      $(document).ready(function () {


        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                },
                update: {
                  url: crudServiceBaseUrl + "/Products/Update",
                  dataType: "jsonp"
                },
                destroy: {
                  url: crudServiceBaseUrl + "/Products/Destroy",
                  dataType: "jsonp"
                },
                create: {
                  url: crudServiceBaseUrl + "/Products/Create",
                  dataType: "jsonp"
                },
                parameterMap: function (options, operation) {
                  if (operation !== "read" && options.models) {
                    return {
                      models: kendo.stringify(options.models)
                    };
                  }
                }
              },
              batch: true,
              pageSize: 20,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: {
                      editable: false,
                      nullable: true
                    },
                    ProductName: {
                      validation: {
                        required: true
                      }
                    },
                    UnitPrice: {
                      type: "number",
                      validation: {
                        required: true,
                        min: 1
                      }
                    },
                    Discontinued: {
                      type: "boolean"
                    },
                    UnitsInStock: {
                      type: "number",
                      validation: {
                        min: 0,
                        required: true
                      }
                    }
                  }
                }
              }
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          pageable: true,
          height: 550,
          selectable: "multiple",
          columns: [
            "ProductName",
            {
              field: "UnitPrice",
              title: "Unit Price",
              format: "{0:c}",
              width: "120px"
            },
            {
              field: "UnitsInStock",
              title: "Units In Stock",
              width: "120px"
            },
            {
              field: "Discontinued",
              width: "120px"
            }
          ],
          editable: "inline"
        });

        $("#context-menu").kendoContextMenu({
          target: "#grid",
          filter: "tr[role='row']",  //2
          select: function (e) {  //3
            var grid = $("#grid").data("kendoGrid");  //a
            var model = grid.dataItem(e.target);  //b
            var rowText = model.ProductName + ", " + model.UnitPrice + ", " + model.UnitsInStock + ", " + model.Discontinued;  //c

            if (e.item.id === 'copyText') {  //d
              new Clipboard('#copyText', {
                text: function (trigger) {
                  return rowText;
                }
              });
            };
          }
        });

        $(document).on("mousedown", "td", function (e) {
          setTimeout(function () {
            $("#grid").data("kendoGrid").saveRow();
          })
        });
      });
    </script>

See Also

In this article