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.
<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>