Clipboard in ASP.NET MVC Spreadsheet control

30 Jul 202616 minutes to read

The Spreadsheet supports clipboard operations such as cut, copy, and paste. Use the enableClipboard property to enable or disable clipboard operations in the Spreadsheet.

NOTE

By default, the enableClipboard property is true.

Cut

Cut removes data from the selected range of cells, rows, or columns and makes it available on the clipboard.

User Interface:

Cut can be done in one of the following ways.

  • Using Cut button in the Ribbon’s HOME tab to perform cut operation.
  • Using Cut option in the Context Menu.
  • Using Ctrl + X or Command + X keyboard shortcut.
  • Using the cut method.

Copy

Copy places data from the selected range of cells, rows, or columns on the clipboard without removing the original data.

User Interface:

Copy can be done in one of the following ways.

  • Using Copy button in the Ribbon’s HOME tab to perform copy operation.
  • Using Copy option in the Context Menu.
  • Using Ctrl + C or Command + C keyboard shortcut.
  • Using the copy method.

Paste

It is used to paste the clipboard data to the selected range, rows or columns. The Paste menu provides the following options:

  • Paste Special - Pastes values along with supported formatting.
  • Paste - Pastes values without formatting.

Paste also supports data copied from external sources. If you perform cut and paste, clipboard data will be cleared, whereas in copy and paste the clipboard contents will be maintained. If you perform paste inside the copied range, the clipboard data will be cleared.

User Interface:

Paste can be done in one of the following ways.

  • Using Paste button in the Ribbon’s HOME tab to perform paste operation.
  • Using Paste option in the Context Menu.
  • Using Ctrl + V or Command + V keyboard shortcut.
  • Using the paste method.

NOTE

If you use the Keyboard shortcut key for cut (Ctrl + X) copy (Ctrl + C) from other sources, you should use Ctrl + V shortcut while pasting into the spreadsheet.

Clipboard operations example

The following code example demonstrates how to perform cut, copy, and paste operations programmatically using the cut, copy, and paste methods.

@Html.EJS().DropDownButton("element").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).Select("itemSelect").Render()
@Html.EJS().Spreadsheet("spreadsheet").AllowScrolling(true).Created("createHandler").Sheets(sheet =>
{
    sheet.Name("Price Details").Ranges(ranges =>
    {
        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();

    }).Columns(column =>
    {
        column.Width(110).Add();
        column.Width(92).Add();
        column.Width(96).Add();
    }).Add();
}).Render()

<script>
    function createHandler() {
        //Applies format to specified range
        this.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
    }
    
    function itemSelect(args) {
        var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
        if (args.item.text === 'Copy')
      spreadsheet.copy();
    if (args.item.text === 'Cut')
      spreadsheet.cut();
    if (args.item.text === 'Paste')
      spreadsheet.paste();
    }
</script>
public ActionResult Index()
{
    List<object> data = new List<object>()
    {
        new { CustomerName= "Romona Heaslip",  Model= "Taurus",  Color= "Aquamarine",  PaymentMode= "Debit Card",  DeliveryDate= "07/11/2015",  Amount= "8529.22" },
        new { CustomerName= "Clare Batterton",  Model= "Sparrow",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/13/2016",  Amount= "17866.19" },
        new { CustomerName= "Eamon Traise",  Model= "Grand Cherokee",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "09/04/2015",  Amount= "13853.09" },
        new { CustomerName= "Julius Gorner",  Model= "GTO",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/15/2017",  Amount= "2338.74" },
        new { CustomerName= "Jenna Schoolfield",  Model= "LX",  Color= "Yellow",  PaymentMode= "Credit Card",  DeliveryDate= "10/08/2014",  Amount= "9578.45" },
        new { CustomerName= "Marylynne Harring",  Model= "Catera",  Color= "Green",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/01/2017",  Amount= "19141.62" },
        new { CustomerName= "Vilhelmina Leipelt",  Model= "7 Series",  Color= "Goldenrod",  PaymentMode= "Credit Card",  DeliveryDate= "12/20/2015",  Amount= "6543.30" },
        new { CustomerName= "Barby Heisler",  Model= "Corvette",  Color= "Red",  PaymentMode= "Credit Card",  DeliveryDate= "11/24/2014",  Amount= "13035.06" },
        new { CustomerName= "Karyn Boik",  Model= "Regal",  Color= "Indigo",  PaymentMode= "Debit Card",  DeliveryDate= "05/12/2014",  Amount= "18488.80" },
        new { CustomerName= "Jeanette Pamplin",  Model= "S4",  Color= "Fuscia",  PaymentMode= "Net Banking",  DeliveryDate= "12/30/2014",  Amount= "12317.04" },
        new { CustomerName= "Cristi Espinos",  Model= "TL",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/18/2013",  Amount= "6230.13" },
        new { CustomerName= "Issy Humm",  Model= "Club Wagon",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "02/02/2015",  Amount= "9709.49" },
        new { CustomerName= "Tuesday Fautly",  Model= "V8 Vantage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "11/19/2014",  Amount= "9766.10" },
        new { CustomerName= "Rosemaria Thomann",  Model= "Caravan",  Color= "Violet",  PaymentMode= "Net Banking",  DeliveryDate= "02/08/2014",  Amount= "7685.49" },
    };
    List<object> items = new List<object>();
    items.Add(new
    {
        text = "Copy"
    });
    items.Add(new
    {
        text = "Cut"
    });
    items.Add(new
    {
        text = "Paste"
    });
    ViewBag.items = items;
    ViewBag.DefaultData = data;
    return View();
}

Prevent the paste functionality

The following example demonstrates how to prevent paste operations in the Spreadsheet. In the actionBegin event, set the cancel argument to true when the request type is paste.

@Html.EJS().DropDownButton("element").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).Select("itemSelect").Render()
@Html.EJS().Spreadsheet("spreadsheet").AllowScrolling(true).Created("createHandler").ActionBegin("actionBeginHandler").Sheets(sheet =>
{
    sheet.Name("Price Details").Ranges(ranges =>
    {
        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();

    }).Columns(column =>
    {
        column.Width(110).Add();
        column.Width(92).Add();
        column.Width(96).Add();
    }).Add();
}).Render()

<script>
    function createHandler() {
        //Applies format to specified range
        this.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
    }
    // Triggers before the action begins.
    function actionBeginHandler(pasteArgs) {
      // To cancel the paste action.
        if (pasteArgs.args.eventArgs.requestType === 'paste') {
            pasteArgs.args.eventArgs.cancel = true;
        }
    }
    
    function itemSelect(args) {
        var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
        if (args.item.text === 'Copy')
      spreadsheet.copy();
    if (args.item.text === 'Cut')
      spreadsheet.cut();
    if (args.item.text === 'Paste')
      spreadsheet.paste();
    }
</script>
public ActionResult Index()
{
    List<object> data = new List<object>()
    {
        new { CustomerName= "Romona Heaslip",  Model= "Taurus",  Color= "Aquamarine",  PaymentMode= "Debit Card",  DeliveryDate= "07/11/2015",  Amount= "8529.22" },
        new { CustomerName= "Clare Batterton",  Model= "Sparrow",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/13/2016",  Amount= "17866.19" },
        new { CustomerName= "Eamon Traise",  Model= "Grand Cherokee",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "09/04/2015",  Amount= "13853.09" },
        new { CustomerName= "Julius Gorner",  Model= "GTO",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/15/2017",  Amount= "2338.74" },
        new { CustomerName= "Jenna Schoolfield",  Model= "LX",  Color= "Yellow",  PaymentMode= "Credit Card",  DeliveryDate= "10/08/2014",  Amount= "9578.45" },
        new { CustomerName= "Marylynne Harring",  Model= "Catera",  Color= "Green",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/01/2017",  Amount= "19141.62" },
        new { CustomerName= "Vilhelmina Leipelt",  Model= "7 Series",  Color= "Goldenrod",  PaymentMode= "Credit Card",  DeliveryDate= "12/20/2015",  Amount= "6543.30" },
        new { CustomerName= "Barby Heisler",  Model= "Corvette",  Color= "Red",  PaymentMode= "Credit Card",  DeliveryDate= "11/24/2014",  Amount= "13035.06" },
        new { CustomerName= "Karyn Boik",  Model= "Regal",  Color= "Indigo",  PaymentMode= "Debit Card",  DeliveryDate= "05/12/2014",  Amount= "18488.80" },
        new { CustomerName= "Jeanette Pamplin",  Model= "S4",  Color= "Fuscia",  PaymentMode= "Net Banking",  DeliveryDate= "12/30/2014",  Amount= "12317.04" },
        new { CustomerName= "Cristi Espinos",  Model= "TL",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/18/2013",  Amount= "6230.13" },
        new { CustomerName= "Issy Humm",  Model= "Club Wagon",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "02/02/2015",  Amount= "9709.49" },
        new { CustomerName= "Tuesday Fautly",  Model= "V8 Vantage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "11/19/2014",  Amount= "9766.10" },
        new { CustomerName= "Rosemaria Thomann",  Model= "Caravan",  Color= "Violet",  PaymentMode= "Net Banking",  DeliveryDate= "02/08/2014",  Amount= "7685.49" },
    };
    List<object> items = new List<object>();
    items.Add(new
    {
        text = "Copy"
    });
    items.Add(new
    {
        text = "Cut"
    });
    items.Add(new
    {
        text = "Paste"
    });
    ViewBag.items = items;
    ViewBag.DefaultData = data;
    return View();
}

When a paste operation is initiated, the actionBegin event is triggered. Check whether the request type is paste, and set the cancel argument to true to prevent the operation. After running the sample, copy a value and attempt to paste it into the Spreadsheet to verify that the paste operation is blocked.

Limitations

  • External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting).
  • If you copy =SUM(A2,B2) and paste, the formula reference will change depending on the pasted cell address but we don’t have support for nested formula(formula reference will be same).
  • Clipboard is not supported with conditional formatting (values only pasting).
  • We have limitation while copying the whole sheet data and pasting it into another sheet.