Paste from Excel

[proteams-kaan]

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?

[sergey.maltsev]

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.

Excel.png (7.14 KiB) Viewed 1068 times

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);

});