Is there a way to support copy/paste from an Excel sheet in Bryntum Grid?
Use case: end user copying a range of cells from her excel file and pasting them onto Grid.
Obviously there needs to be a way to match columns/data but we were just wondering whether there is a hidden feature like this or whether it's achievable with custom development?
If it's possible to develop could you point us towards the necessary classes that we need to utilize/modify?
Support Forum
Hi, proteams-kaan!
We have no build-in functions to parse text buffer copied from Excel but it should be easy to implement parsing if you know the data format which is pasted from Excel.
After parsing data you could just add new rows to grid store via grid.store.add().
This is small example based on Grid basic demo.
Open attached Grid.xlsx file in Excel and try to copy (Ctrl + С) paste (Ctrl + V) selection from excel to Grid.
Of course you should update the code to be compatible with your Excel data format.
We have no build-in functions to parse text buffer copied from Excel but it should be easy to implement parsing if you know the data format which is pasted from Excel.
After parsing data you could just add new rows to grid store via grid.store.add().
This is small example based on Grid basic demo.
Open attached Grid.xlsx file in Excel and try to copy (Ctrl + С) paste (Ctrl + V) selection from excel to Grid.
Of course you should update the code to be compatible with your Excel data format.
import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/NumberColumn.js';
import DataGenerator from '../../lib/Common/helper/util/DataGenerator.js';
const grid = new Grid({
appendTo : 'container',
minHeight : '20em',
features : {
group : false
},
// Headers will ripple on tap in Material theme
ripple : {
delegate : '.b-grid-header'
},
columns : [
{
text : 'Name',
field : 'name',
flex : 2,
editor : {
type : 'textfield',
required : true
}
}, {
text : 'Age',
field : 'age',
width : 100,
type : 'number'
}, {
text : 'City',
field : 'city',
flex : 1
}
],
data : []
});
document.body.addEventListener('paste', event => {
const
clipboardData = window.clipboardData || event.clipboardData || event.originalEvent && event.originalEvent.clipboardData,
pastedText = clipboardData.getData('Text') || clipboardData.getData('text/plain');
if (!pastedText && pastedText.length) {
return;
}
let
fields = [];
const
rows = [];
(pastedText).split('\r\n').forEach(line => {
if (line.length > 0) {
const arr = line.split('\t');
if (arr.length > 0) {
if (fields.length === 0) {
fields = arr;
}
else {
let data = {};
for (let i = 0; i < Math.min(arr.length, fields.length); i++) {
data[fields[i]] = arr[i];
}
rows.push(data);
}
}
}
});
grid.store.add(rows);
});
- Attachments
-
- Grid.xlsx
- (8.56 KiB) Downloaded 166 times