Clipboard in ASP.NET Core Spreadsheet control

30 Jul 202617 minutes to read

The Spreadsheet supports clipboard operations such as cut, copy, and paste. Clipboard operations can be enabled or disabled by setting the enableClipboard property in Spreadsheet.

NOTE

By default, the enableClipboard property is true.

Cut

Cut is used to remove data from the selected range of cells, rows, or columns and place it 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 is used to duplicate data from the selected range of cells, rows, or columns and place it on the clipboard.

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

Paste is used to insert clipboard data into the selected range, rows, or columns. The following paste options are available:

  • Paste Special - You can paste the values with formatting.
  • Paste - You can paste only the values without formatting.

External clipboard operations are also supported. 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. 
<ejs-dropdownbutton id="element" content="Clipboard" items="ViewBag.items" select="itemSelect"></ejs-dropdownbutton>
<ejs-spreadsheet id="spreadsheet" created="createHandler">
    <e-spreadsheet-sheets>
        <e-spreadsheet-sheet>
            <e-spreadsheet-ranges>
                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
            </e-spreadsheet-ranges>
            <e-spreadsheet-columns>
                <e-spreadsheet-column width="130"></e-spreadsheet-column>
                <e-spreadsheet-column width="92"></e-spreadsheet-column>
                <e-spreadsheet-column width="96"></e-spreadsheet-column>
            </e-spreadsheet-columns>
        </e-spreadsheet-sheet>
    </e-spreadsheet-sheets>
</ejs-spreadsheet>

<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 IActionResult 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 shows how to prevent the paste action in the Spreadsheet. In the actionBegin event, set the cancel argument to true for the paste request type.

<ejs-dropdownbutton id="element" content="Clipboard" items="ViewBag.items" select="itemSelect"></ejs-dropdownbutton>
<ejs-spreadsheet id="spreadsheet" created="createHandler" actionBegin="actionBeginHandler">
    <e-spreadsheet-sheets>
        <e-spreadsheet-sheet>
            <e-spreadsheet-ranges>
                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
            </e-spreadsheet-ranges>
            <e-spreadsheet-columns>
                <e-spreadsheet-column width="130"></e-spreadsheet-column>
                <e-spreadsheet-column width="92"></e-spreadsheet-column>
                <e-spreadsheet-column width="96"></e-spreadsheet-column>
            </e-spreadsheet-columns>
        </e-spreadsheet-sheet>
    </e-spreadsheet-sheets>
</ejs-spreadsheet>

<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 IActionResult 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();
}

Limitations

  • External clipboard support is limited when copying data from another source and pasting into the Spreadsheet. Only basic formatting such as values, number formatting, cell formatting, and text formatting is supported.
  • If you copy =SUM(A2,B2) and paste it, the formula reference changes based on the destination cell address. Nested formula references are not updated in the same way.
  • Clipboard is not supported with conditional formatting (values only pasting).
  • There is a limitation when copying all data from a sheet and pasting it into another sheet.