When pasting clipboard/Excel data into AG-Grid, how do I get the data to append to the current rows?
If my table currently has a single row and I'm trying to paste 10 rows into the table, Ag-Grid only overwrites the single row instead of appending the extra 9 rows. Am I missing a gridOption or is this not possible?
To get what you need, follow these steps:
1) Add a paste event listener:
mounted () {
window.addEventListener('paste', this.insertNewRowsBeforePaste);
}
2) Create the function that retrieves the data from the clipboard and creates new lines in the grid:
insertNewRowsBeforePaste(event){
var self = this;
// gets data from clipboard and converts it to an array (1 array element for each line)
var clipboardData = event.clipboardData || window.clipboardData;
var pastedData = clipboardData.getData('Text');
var dataArray = self.dataToArray(pastedData);
// First row is already in the grid and dataToArray returns an empty row at the end of array (maybe you want to validate that it is actually empty)
for (var i = 1; i < dataArray.length-1; i++) {
self.addEmptyRow(i);
}
}
3) dataToArray is a function that ag-Grid uses to paste new lines and I just needed to adjust the "delimiter" variable. I copied it from the clipboardService.js file.
// From http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
export var dataToArray = function(strData) {
var delimiter = self.gridOptions.api.gridOptionsWrapper.getClipboardDeliminator();;
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp((
// Delimiters.
"(\\" + delimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + delimiter + "\\r\\n]*))"), "gi");
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]];
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null;
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec(strData)) {
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[1];
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If id does not, then we know
// that this delimiter is a row delimiter.
if (strMatchedDelimiter.length &&
strMatchedDelimiter !== delimiter) {
// Since we have reached a new row of data,
// add an empty row to our data array.
arrData.push([]);
}
var strMatchedValue = void 0;
// Now that we have our delimiter out of the way,
// let's check to see which kind of value we
// captured (quoted or unquoted).
if (arrMatches[2]) {
// We found a quoted value. When we capture
// this value, unescape any double quotes.
strMatchedValue = arrMatches[2].replace(new RegExp("\"\"", "g"), "\"");
}
else {
// We found a non-quoted value.
strMatchedValue = arrMatches[3];
}
// Now that we have our value string, let's add
// it to the data array.
arrData[arrData.length - 1].push(strMatchedValue);
}
// Return the parsed data.
return arrData;
}
4) Finally, to add new blank lines in the grid, use the function below:
addEmptyRow(rowIndex) {
var newItem = {};
this.gridOptions.api.updateRowData({add: [newItem], addIndex: rowIndex});
}
Basically what this code does is insert blank rows at the beginning of the grid and let ag-Grid paste the data into those rows. For it to work, the line where the code is pasted must be the first line in the grid. It's using the updateRowData from ag-grid (https://www.ag-grid.com/javascript-grid-data-update/).
You may need to make some adjustments if you need something else.
I have the same question. I originally used a paste event listener to add a number of rows to the grid, based on the difference between available space and clipboard data length. But now the grid will only add the rows and not complete the paste.
