New to Kendo UI for jQuery? Download free 30-day trial

Copy Grid Data from Excel


Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript


How can I copy data from Excel in the Kendo UI Grid for jQuery?


The following example demonstrates how to create a Grid that supports pasting from Excel.

     <div id="grid" tabindex="0"></div>
        // the column fields should match the excel columns
        columns: [
          { field: "Name" },
          { field: "Age" }
        dataSource: [
          { Name: "John Doe", Age: 33 }
      }).on('focusin', function(e) {
        // Get the position of the Grid.
        var offset = $(this).offset();
        // Create a textarea element which will act as a clipboard.
        var textarea = $("<textarea>");
        // Position the textarea on top of the Grid and make it transparent.
          position: 'absolute',
          opacity: 0,
          left: offset.left,
          border: 'none',
          width: $(this).width(),
          height: $(this).height()
        .on('paste', function() {
          // Handle the paste event.
          setTimeout(function() {
            // The pasted content.
            var value = $.trim(textarea.val());
            // Get instance to the Grid.
            var grid = $("#grid").data("kendoGrid");
            // Get the pasted rows - split the text by new line.
            var rows = value.split('\n');

            var data = [];

            for (var i = 0; i < rows.length; i++) {
              var cells = rows[i].split('\t');
                Name: cells[0],
                Age: cells[1]
        }).on('focusout', function() {
          // Remove the textarea when it loses focus.
        // Focus the textarea.
        setTimeout(function() {

See Also

In this article