React-data-grid: How to paste value to cell without edit mode?

[IAkumaI]

How can I paste value to cell after single click (select) cell. Before entering edit-mode?

Now it work:
Double click cell - Ctrl + V

How it should work:
Single click cell (or select it via key-arrows) - Ctrl +V

[diogofcunha]

This is a feature that definitely works and it's on the examples, check the example on here.

To allow copy paste you must pass onGridRowsUpdatedcallback to the grid, a example of a generic callback is on the same example mentioned above.

[IAkumaI]

Example is not work.
When I try to paste text it just clear the cell.

[IAkumaI]

Maybe it depends on the browser?
I use Chrome last ver.

[diogofcunha]

This has been tested in a decent amount of browsers and I also have the last version of Chrome. You didn't change anything in the live jsx editor?

[IAkumaI]

No. Just open and tried to paste text from Notepad++.
Console has no errors.
Hm..

[IAkumaI]

Firefox - same result. Only cleared cell.

[jpdriver]

Yeah I get the same in both Chrome and Safari on OS X. Definitely a thing 😞

[jpdriver]

also drag down's bust

[IAkumaI]

I use Windows 7.
Dragdown works fine :)

[diogofcunha]

I just figured out that you want to paste external data and not to copy a cell from the grid and paste it.

That feature isn't supported at the moment, the only way to do it is enter cell edit - Ctrl + V.

To do that we need to check the clipboard and do some validation and it will take some time to think and develop. We will accept a pull request for it, if a PR not comes up you can always take a look at our milestones.

[jpdriver]

no.. this is copying a cell and pasting into the same grid... do you even watch my gifs @diogofcunha ??!

did you mean copying from off-grid @IAkumaI ? if so there was the start of an issue to track it here https://github.com/adazzle/react-data-grid/issues/86

[IAkumaI]

Yeah, I meant copy from off-grid. Copy from Notepad, for example.
Sorry, if my english isn't good.

[jpdriver]

ahhh ok cool.

to copy in from off-grid you basically have to parse the text you paste in, and figure out the rows and columns yourself.

as @diogofcunha said that functionality is not supported right now, but we'll track it under that linked issue above.

[diogofcunha]

@jpdriver was I mentioned on my first comment you must pass onGridRowsUpdatedcallback to the grid for copy paste/drag down to work, the example of your gif doesn't do that, and that's why it isn't working.

[IAkumaI]

So, may you create an example to show this is works?

I tried to add onGridRowsUpdated to my code. Callback even don't fired when I try to paste value from Notepad.

[IAkumaI]

For now I fount the next solution (not too good, but it works):

In componentDidMount we add event listener onpaste to the node (do not forget unbind it on unmount component):

let pastedText = undefined;

if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
} else if (e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
    pastedText = e.originalEvent.clipboardData.getData('text/plain');
}

if (pastedText !== undefined) {
    this.handleClipboardPaste(pastedText);
}

And the handleClipboardPaste method:

var rowIdx = this.refs.grid.state.selected.rowIdx;
var cellIdx = this.refs.grid.state.selected.idx;

if (rowIdx !== undefined && cellIdx !== undefined) {
    var columns = this.getColumns();

    if (columns[cellIdx] && columns[cellIdx].editable) {
        var item = this.rowGetter(rowIdx);
        var key = columns[cellIdx].key;

        // here you should set data value
        // In my case is the Redux store
    }
}

this.refs.grid - is a ReactDataGrrid component.
this.getColumns - just returns columns for the grid.

In fact, we just catch clipboard paste event and push data to the selected cell.

[leimd]

Hey guys, we made a kind of hack for this to work, how we do it is that using we used React's onPaste Event handler to intercept any paste event on the grid, and then pass null to the ReactDataGrid's onCellCopyPaste. so basically the Render function looks something like this.

<ReactDataGrid
    onPaste={this.handlePaste}
    onCellCopyPaste={null}
    onCellSelected={this.onCellSelected}
/>

You noticed that I've also included onCellSelected which looks like this

    onCellSelected(coordinates) {
        this.clickedCell = {
            row: coordinates.rowIdx,
            column: coordinates.idx - 1
            // because there is a checkbox column makes this 1 indexed, convert it to 0 indexed here
        };
    },

basically when a user clicks a cell, we set stored the coordinates to a variable for use when they paste.
now for handlePaste, basically what we're doing here is parse the pasted text into a two dimensional matrix, then update the data with row number and column number
(btw we used Backbone Collections and Models here)

handlePaste: function(e) {
        let rowStart = this.clickedCell.row;
        let columnStart = this.clickedCell.column;
        const maxColumn = columns.length - 1;
        const oldMaxRow = this.getCollection().length - 1;

        const pastedText = e.clipboardData.getData('text/plain');
        const rows = pastedText.split("\n");
        const matrix = [];
        for (let i in rows) {
            matrix.push(rows[i].split("\t"));
        }

        matrix.forEach((row, i) => {
            let rowNumber = i + rowStart;
                if (rowNumber > oldMaxRow) {
                    this.getCollection().add({});
                }
            row.forEach((value, j) => {
                let columnNumber = j + columnStart;
                if (columnNumber <= maxColumn) {
                    this.updateCoordinate(rowNumber, columnNumber, value); //helper
                }
            })
        });
        this.forceUpdate(); // this is optional, you only need it if you did some trick to disable update while handling paste
    },

and of course there is a helper function which actually does the part to figure out key and model from row number and column number and then set the value

    updateCoordinate(row, column, value) {
        const key = columns[column].key;
        const model = this.getCollection().at(row);
        model.set(key, value);
    },

With all these, the user has the ability to paste any size array from any cell with out going into edit mode.

[danvk]

@leimd could you send a PR or link to a fork with this feature added? I'd love to give it a try!

[leimd]

Hi Dan,

I am currently in China(Tibet) right now and I will only return to Canada on October 17 and I can send a PR after that.

Tom

??
??

---

---

Mengda,Lei (Tom)
??

---

发件人: Dan Vanderkam [email protected]
发送时间: 2016年10月4日 17:51:18
收件人: adazzle/react-data-grid
抄送: Tom Lei; Mention
主题: Re: [adazzle/react-data-grid] How to paste value to cell without edit mode? (#293)

@leimdhttps://github.com/leimd could you send a PR or link to a fork with this feature added? I'd love to give it a try!

―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/adazzle/react-data-grid/issues/293#issuecomment-251461916, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE1LmevxkRtvksZ28UpZNTWDb27TKhjkks5qwpIWgaJpZM4ILBRN.

[larryboymi]

@leimd does this functionality still work with the latest version? I'm trying to implement similar but onPaste doesn't seem to be firing, while keyboard events seem to be.

Edit: Nevermind, I was able to get onPaste to fire by placing it on a containing tag. When used directly on ReactDataGrid it never fired, as all events ended up being keyboard events. Thanks! Now I just have to figure out how to get all the rows to re-render after the redux change (only does for clicked on rows currently).

[jeffcarbs]

Thanks for the ideas in this thread! I got it working in a similar fashion and figured I'd comment with my implementation to give another sample (_NOTE: I'm using immutable.js for my row data_):

handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
  let rows = this.state.rows;

  for (let i = 0; i <= toRow - fromRow; i++) {
    const index = fromRow + i;
    const update = Array.isArray(updated) ? updated[i] : updated;

    rows = rows.update(index, Map(), r => r.merge(update));
  }

  this.setState({ rows });
};

handlePaste = (e) => {
  const pastedRows = e.clipboardData.getData('text/plain').split('\n');
  const pastedColumnKeys = [];

  for (let i = 0; i < pastedRows[0].split('\t').length; i++) {
    const columnIdx = this.state.selectedCell.idx + i;
    pastedColumnKeys.push(this.props.columns[columnIdx].key);
  }

  const updated = pastedRows.map((pastedRow) => {
    const columns = pastedRow.split('\t');
    return pastedColumnKeys.reduce(
      (memo, key, index) => { memo[key] = columns[index]; return memo; }
      {},
    );
  });

  this.handleGridRowsUpdated({
    fromRow: this.state.selectedCell.rowIdx,
    toRow: this.state.selectedCell.rowIdx + pastedRows.length - 1,
    updated
  });
};

handleGridRowsUpdated is the handler I pass as the onGridRowsUpdated prop. When firing from within ReactDataGrid the updated key is will be an object. It's expected that you'll updated every row from fromRow to toRow using the value in that object.

As you can see, I've updated my handleGridRowsUpdated to allow updated to also be an array. If it's an array, instead of using setting all affected rows to the same data it will set each row to the data specified in that index of the array.

Then in my paste handler, I split the pasted text by newline, then by tab and use that information to build a different data object for each pasted row. I then pass that array of updated row data to my handleGridRowsUpdated. The benefit here is that I'm always updating my row data in the same function.

Hope this helps someone!

[kavipreetha]

@leimd does this functionality still work with the latest version? I'm trying to implement similar but onPaste doesn't seem to be firing, while keyboard events seem to be.

Edit: Nevermind, I was able to get onPaste to fire by placing it on a containing tag. When used directly on ReactDataGrid it never fired, as all events ended up being keyboard events. Thanks! Now I just have to figure out how to get all the rows to re-render after the redux change (only does for clicked on rows currently).

@larryboymi Can you let me know how did you trigger onPaste using the containing tag?