This topic will guide you through the process of implementing pasting of data from an Excel spreadsheet to an igGrid.
This topic takes you step-by-step toward implementing pasting of data from an Excel spreadsheet to an igGrid. The following is a conceptual overview of the process:
focusin and keydown events.focusin event handler, attach a invisible textarea to the page. Attach event handlers for the paste event of the newly added textarea.keydown event handler move the focus to the textarea when pasting (Ctrl + V) is executed on the grid.paste event handler for the textarea proccess the pasted data and update the grid via the Updating feature API.Configure an igGrid with Updating and Selection features.
The following topics cover enabling the related features:
Attach event handlers for the grid's focusin and keydown events.
These events can be attached directly to the igGrid main element, for example:
$("#grid").igGrid({ ... }).on('focusin', function (e) { ... }).on('keydown', function (evnt) { ... });
In focusin event handler, attach an invisible textarea to the page. Attach event handlers for the paste event of the newly added textarea.
The textarea's purpose is to handle the paste event where we can safely access the pasted data. Not all browsers allow directly accessing the clipboards outside of the related events data due to security reasons.
The textarea is attached to the DOM as an invisible element in order to not interfere with the UI.
.on('focusin', function (e) {
if ($("#pasteHelper").length > 0) {
return;
}
var container = $(document.body);
var containerDiv = $("<div></div>")
.css({
"position": "fixed",
"top": -10000,
"left": -10000
});
//create textarea for handling paste event. Text area will be transparent.
var textArea = $("<textarea id='pasteHelper'></textarea>")
.css({
"opacity": 0,
"overflow": "hidden"
})
.appendTo(containerDiv);
containerDiv.appendTo(container);
textArea.on("paste", pasteHandler);
})
In keydown's event handler move the focus to the textarea when pasting (Ctrl + V) is executed on the grid.
This will ensure that the keydown event is passed on to the textarea so that its paste event is fired for it with the pasted data.
.on('keydown', function (evnt) {
//handle grid's keydown event
var ctrl = evnt.ctrlKey, key = evnt.keyCode;
if (ctrl && key == 86 || evnt.shiftKey && key == 45) // Ctrl-V || Shift-Ins
{
//on paste (Ctrl+V) move focus to textarea
$("#pasteHelper").focus();
}
});
In the paste event handler for the textarea proccess the pasted data and update the grid's records.
Once the data is processed you can either update the records (starting from the selected cell) or add them as new records. The updating is done via the igGrid Updating feature's API.
function pasteHandler(event) {
var data;
//get clipboard data - from window.cliboardData for IE or from the original event's argumets.
if (window.clipboardData) {
window.event.returnValue = false;
data = window.clipboardData.getData("text");
} else {
data = event.originalEvent.clipboardData.getData('text/plain');
}
//process the clipboard data
var processedData = ProcessData(data);
if (pasteMode === "Paste starting from active cell") {
//update starting from selected cell
UpdateRecords(processedData);
} else {
//add to the grid
AddRecords(processedData)
}
$("#undo").igButton("option", "disabled", false);
$("#saveChanges").igButton("option", "disabled", false);
}
The below sample demonstrates the result of the code. It also shows a notification message when the pasting is complete and allows you to change the pasting mode. There are two possible modes: Paste data as new records - when this mode is selected the pasted records will be added as new rows in the grid. Paste starting from active cell - when this mode is selected the pasted records will replace the data starting from the active grid cell.
In order to test it open up any Excel spreadsheet (or this one here), copy some rows, and paste it into the grid using the keyboard.
igGrid™ control.View on GitHub