Copy Grid Data from Excel

Environment

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

Description

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

Solution

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

EditPreviewOpen In Dojo

     <div id="grid" tabindex="0"></div>
    <script>
      $("#grid").kendoGrid({
        // 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.
        textarea.css({
          position: 'absolute',
          opacity: 0,
          top: offset.top,
          left: offset.left,
          border: 'none',
          width: $(this).width(),
          height: $(this).height()
        })
        .appendTo('body')
        .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');
              data.push({
                Name: cells[0],
                Age: cells[1]
              });
            };
            grid.dataSource.data(data);
          });
        }).on('focusout', function() {
          // Remove the textarea when it loses focus.
          $(this).remove();
        });
        // Focus the textarea.
        setTimeout(function() {
          textarea.focus();
        });
      });
    </script>