Edit this page

Copy Data from Excel

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 grid position
        var offset = $(this).offset();
        // crete 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,
          top: offset.top,
          left: offset.left,
          border: 'none',
          width: $(this).width(),
          height: $(this).height()
        .on('paste', function() {
          // handle the paste event
          setTimeout(function() {
            // the 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

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article