Articles in this section
Category / Section

How to copy selected records to clipboard using Contextmenu in .NET WebForms Grid?

1 min read

This Knowledge base explains how to copy selected records of grid to clipboard using context Menu.

Solution:

This behavior can be achieved by using the contextClick event of Grid. In the contextClick event the selected rows are obtained by using the getSelectedRows method. Then the selected rows are copied to the clipboard using JQuery methods.

The following code example demonstrates how to copy selected records of grid to clipboard using contextMenu.

1.Render the Grid control.

HTML

<div id="Grid"></div>

JavaScript

<script type="text/javascript">
          $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
                dataSource: window.gridData,
                allowPaging: true,
                enableTouch:false,
                allowSelection:true,
                selectionType : "multiple",
                contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'Copy', text: "Copy Row" }] },
                contextClick:"contextClick",
                columns: [
                         { field: "OrderID", headerText: 'Order ID',  width: 75,},
                         { field: "CustomerID", headerText: 'Customer ID',  width: 75,},
                         { field: "EmployeeID", headerText: 'Employee ID',  width: 75 },
                         { field: "ShipCity", headerText: 'ShipCity', width: 110}
                ]
            });  
        });
</script>
 

MVC

@(Html.EJ().Grid<object>("FlatGrid")
            .Datasource((IEnumerable<object>)ViewBag.datasource)
            .AllowPaging()
            .EnableTouch(false)
            .AllowSelection()
            .SelectionType(SelectionType.Multiple)
            .ClientSideEvents(eve => { eve.ContextClick("contextClick"); })
            .ContextMenuSettings(contextMenu =>
            {
                contextMenu.EnableContextMenu();
                contextMenu.DisableDefaultItems();
                contextMenu.CustomContextMenuItems(new List<CustomContextMenuItems> { new CustomContextMenuItems() { Id = "Copy", Text = "Copy Row" } });
            })
                      .Columns(col =>
                      {
                          col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
                          col.Field("CustomerID").HeaderText("Customer ID").Width(75).Add();
                          col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
                          col.Field("ShipCity").HeaderText("ShipCity").Width(110).Add();
                      }))

 

C#

using EJGrid.Models;
using System.Linq;
using System.Web.Mvc;
using System.Web.UI.WebControls;
using Syncfusion.Linq;
 
namespace EJGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.datasource = OrderRepository.GetAllRecords().ToList();          
            return View();
        }
    }
}

 

ASPX

<ej:Grid runat="server" ID="FlatGrid" AllowPaging="true">
    <ClientSideEvents ContextClick="contextClick" />
    <ContextMenuSettings EnableContextMenu="true" DisableDefaultItems="true">
        <CustomContextMenuItem>
            <ej:CustomContexMenuItems Id="Copy" Text="Copy Row" /> 
        </CustomContextMenuItem>
    </ContextMenuSettings>
    <Columns>
       <ej:Column Field="OrderID" HeaderText="Order ID" Width="75" />
       <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="75" />
       <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" />
       <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="110" />
    </Columns>
</ej:Grid>

 

C#

using System;
using System.Linq;
using System.Web.UI;
using Syncfusion.Linq;
 
namespace WebApplication21
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.FlatGrid.DataSource = OrderRepository.GetAllRecords().ToList();
            this.FlatGrid.DataBind();  
        }
    }
}            

 

ASP.NET CORE

 
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-paging="true" context-click="contextClick">
    <e-context-menu-settings enable-context-menu="true" custom-context-menu-item='@new List<CustomContexMenuItems> { new CustomContexMenuItems { Id="Copy", Text="Copy Row" } }' ></e-context-menu-settings>
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" width="75"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="75"></e-column>
        <e-column field="EmployeeID" header-text="EmployeeID" width="75"></e-column>
        <e-column field="Verified" header-text="Verified" width="110"></e-column>
    </e-columns>
</ej-grid>
 
 

 

C#

using System.Linq;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
 
namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        private NORTHWNDContext _context;
        public HomeController(NORTHWNDContext context)
        {
            _context = context;
        }
        public IActionResult Index()
        {
            ViewBag.datasource = _context.Orders.ToList();
            return View();
        }
    }
}          

 

Angular

HTML

<ej-grid id="Grid" #grid [allowPaging]="true" [enableTouch]="false"
 [dataSource]="gridData"  [contextMenuSettings]="context" (contextClick)="contextClick($event)" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID" width="75" textAlign="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="75"></e-column>        
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
        <e-column field="ShipCity" headerText="ShipCity" width="110"></e-column>             
    </e-columns>
</ej-grid>
 

 

TS

 
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
 
import {CommonModule} from "@angular/common";
 
import { EJComponents } from "ej-angular2/src/ej/core";
 
@Component({
    selector: 'ej-app',
    templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
    public gridData;
    public context;
  @ViewChild('grid') Grid: EJComponents<ej.Grid, any>;
  constructor() {
    this.context = { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'Copy', text: "Copy Row" }] };    
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'   
    this.gridData = (window as any).gridData;
  }
  contextClick(e: any) {
    if (e.text == "Copy Row"){
               var rows = this.Grid.widget.getSelectedRows(); 
               var clone = rows.clone();
                var table = $("<table></table>");
                for (var i = 0; i < clone.length; i++) {
                    table.append(clone[i]);
                }
                $("body").append(tab);
                var range = document.createRange();
                var selection = window.getSelection();
                range.selectNode(table[0]);
                selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                table.remove(); 
          }
     }
}

 

2. In contextClick event the selected rows are obtained by using getSelectedRows method. Then we have created a table with the selected rows and copied the table to the clipboard using the JQuery methods.

JS

<script>
    function contextClick(args){
           if (args.text == "Copy Row") {
                var rows = this.getSelectedRows();
                var clone = rows.clone();
                var table = $("<table></table>");
                for (var i = 0; i < clone.length; i++) {
                    table.append(clone[i]);
                }
                $("body").append(table);
                var range = document.createRange();
                var selection = window.getSelection();
                range.selectNode(table[0]);
                selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                table.remove();
            }
        }
</script>

 

Result:

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied