Copy and pasting Excel Sheet data to Syncfusion Grid for MVC

As a member of the Grid ASP.NET MVC team, I discovered a cross-browser way to access data pasted in an HTML <div> element. I was wondering why this couldn’t be used in our Syncfusion Grid control to paste data from Excel. It ends up it can. I’ve provided the following steps on how to enable this in the grid.

Essential Grid preparation
For the purpose of this demo, I’ll use a simple grid configuration. The grid definition in the View page is as follows.

 

    Html.Syncfusion().Grid("Grid1")
    .ActionMode(ActionMode.Server)
    .Caption("Employee")
    .AllowSelection(false)
    .ShowCaption(true).EnableSorting()
    .Datasource(Model)

The Controller side codes are as follows:

   public ActionResult Index()
  {

   // Passing Data to View
  return View(EmployeeRepository.GetEmployees());
  }
 [HttpPost]
  public ActionResult Index(PagingParams args, string pastedData)
  {
// Get data from repository
 var data = EmployeeRepository.GetEmployees();
  if (pastedData != null)
 {

 // parsing pasted data to Actual type
  var parsed = (List)new JavaScriptSerializer().Deserialize(pastedData, typeof(List));
  // Updating those the Database
  EmployeeRepository.AddRange(parsed);
   }
  // Returning GridAction
  return data.GridActions();
 }

Converting a pasted date to JSON
The HTML markup and jQuery scripts play a vital role in getting clipboard Excel information and converting it to JSON. Also for this purpose, I wrote the jquery.pastable.js file in the jQuery plug-in style. You can use that JavaScript file in this sample. The final reduced script and HTML markup are as follows.

[cshtml]

 

[jQuery]

 $(document).ready(function () {
  // Binding the paste-able jQuery plug-in.
   $("#pastable").pastable({
   OnPasteComplete: function (data) {
   // Ensuring the pasted information is Excel data or HTML table data.
   if (data instanceof Object) {
   // Acquiring grid object
   var grid = $find("Grid1");
    var fn = function (sender, args) {
  // Serializing pasted data and add it grid request header for server-side access
   args.data["pastedData"] = Sys.Serialization.JavaScriptSerializer.serialize(data);
   sender.remove_OnActionBegin(fn);
   }

   // OnActionBegin event binding

 grid.add_OnActionBegin(fn);

  // Sending grid refresh request to update the pasted data
  grid.sendRefreshRequest();
  }
  }

  });

 });

The jquery.pastable.js file is attached with sample.

Output
The output will look like this:

[Grid]

[Excel Data]

[Before Pasting]

[After Pasting]

Sample link

As you can see, Essential Grid for ASP.NET MVC has client- and server-side libraries that are flexible enough to be used for any programming need.

 

– Bharath M