ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Clipboard in ASP.NET Core Grid control

29 Jul 2021 / 3 minutes to read

The clipboard provides an option to copy selected rows or cells data into the clipboard.

The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into the clipboard.

Interaction keys Description
Ctrl + C Copy selected rows or cells data into clipboard.
Ctrl + Shift + H Copy selected rows or cells data with header into clipboard.
tagHelper
local.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowSelection="true" >
    <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>               
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Copy to clipboard by external buttons

To copy selected rows or cells data into the clipboard with help of toolbar buttons, you need to define the toolbarClick event and invoke the copy method.

tagHelper
local.cs
Copied to clipboard
<ejs-button id="copy" content="Copy"></ejs-button>
<ejs-button id="copyHeader" content="Copy Header"></ejs-button>

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    document.getElementById("copy").addEventListener("click", function () {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.copy();
    })
    document.getElementById("copyHeader").addEventListener("click", function () {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.copy(true);
    })
</script>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

AutoFill

AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining enableAutoFill property as true.

tagHelper
autofill.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" enableAutoFill="true" allowSelection="true" toolbar="@(new List<string>() { "Add", "Update","Cancel" })">
  <e-grid-selectionsettings cellSelectionMode="Box" mode="Cell" type="Multiple"></e-grid-selectionsettings>
  <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
  <e-grid-columns>
    <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
    <e-grid-column field="CustomerID" headerText="Customer ID" validationRules="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>
    <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
    <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
  </e-grid-columns>
</ejs-grid>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}
  • If enableAutoFill is set to true, then the autofill icon will be displayed on cell selection to copy cells.
  • It requires the selection mode to be Cell and cellSelectionMode to be Box and also Batch Editing should be enabled.

Limitations of AutoFill

  • Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to number type cells then it will display as NaN. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an empty cell.
  • Linear series and the sequential data generations are not supported in this autofill feature.

Paste

You can able to copy the content of a cell or a group of cells by selecting the cells and pressing Ctrl + C shortcut key and paste it to another set of cells by selecting the cells and pressing Ctrl + V shortcut key.

tagHelper
paste.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" allowSelection="true" toolbar="@(new List<string>() { "Add", "Update","Cancel" })">
  <e-grid-selectionsettings cellSelectionMode="Box" mode="Cell" type="Multiple"></e-grid-selectionsettings>
  <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
  <e-grid-columns>
    <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
    <e-grid-column field="CustomerID" headerText="Customer ID" validationRules="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>
    <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
    <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
  </e-grid-columns>
</ejs-grid>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

To perform paste functionality, it requires the selection mode to be Cell and cellSelectionMode to be Box and also Batch Editing should be enabled.

Limitations of Paste Functionality

  • Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will display as NaN. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an empty cell.
Previous
Next