ej2-mvc-grid-copypaste's Introduction

Copying and Pasting Excel Sheet Data to EJ2 Grid ASP.NET MVC

This sample explains about how to perform copy and paste actions in ASP.NET MVC DataGrid.

Cross browser way to copy paste Excel sheet data to ASP.NET MVC Grid.

[Index.cshtml]

document.getElementById('grid').addEventListener(ej.base.Browser.isIE ? 'keydown' : 'paste', function (e) {
        var tsv;
        if (e.ctrlKey && (e.keyCode == 86)) { //Handle copy paste in IE.
            tsv = window.clipboardData.getData('Text');
        } else {
            tsv = e.clipboardData.getData('Text')
        }
        if (tsv) {
            var ajax = new ej.base.Ajax("@Url.Action("OnPaste")");
            ajax.type = "POST";
            ajax.send(JSON.stringify({ pastedData: tsvJSON(tsv) }))
                .then(function (data) {
                    var grid = document.getElementById('grid').ej2_instances[0];
                    grid.dataSource = JSON.parse(data);
                });
        }
    });

Add a controller action to merge pasted data with the actual data and bound the result to the grid.

[HomeController.cs]

[HttpPost]
public ActionResult OnPaste(PostData data, string action)
{
    OrdersList.AddRange(data.pastedData);
    return Json(OrdersList);
}

Prerequisites

Visual Studio 2022

How to run the project

Checkout this project to a location in your disk.
Open the solution file using the Visual Studio 2022.
Restore the NuGet packages by rebuilding the solution.
Run the project.
Placed excel file in project location. Copy the rows and paste it within a Grid.

Recommend Projects