React-data-grid: Shift+Return to set line break when editing a cell

Created on 26 Sep 2016 · 4Comments · Source: adazzle/react-data-grid

I'm submitting a ... (check one with "x")

[ ] bug report
[ x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
enter key toggles cell editor

Expected/desired behavior
shift + enter to create a line break in the edited text

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

What is the motivation / use case for changing the behavior?
Some of the data I am representing is formatted text which users need to add line breaks

Question

Source

JordanBonitatis

Most helpful comment

Hi.

The key things when building a new editor are:

getInputNode this will tell the editor where to focus when you load it
getValue this is used by the grid to get the value you're trying to commit to the grid.

In your case, as you want a text area you're editor will end up being something like this:

class TextAreaEditor extends Component {
   getInputNode() {
      let domNode = ReactDOM.findDOMNode(this);
      return domNode.querySelector('textarea');
   }

   getValue() {
      // return the value depending on the way you decide to store the textarea text.
   }

   handleKeyDown(e) {
      if (e.key === 'Enter' && e.shiftKey) {
         e.stopPropagation();
      }
   }

   render() {
      return <textarea onKeyDown={this.handleKeyDown}></textarea>;
   }
}

diogofcunha on 27 Sep 2016

👍2

All 4 comments

Hi @JordanBonitatis, I don't see that as something we should support in the core as people may have different ideas about the behaviour when hitting Shift + Enter.

That doesn't mean that doing it is not possible, all you will need to do in your custom editor is:

Assign a onKeyDown event handler
In your handler stopPropagation when shift + enter is pressed.

The code for your handler will be something like this:

handleKeyDown(e) {
   if (e.key === 'Enter' && e.shiftKey) {
      e.stopPropagation();
   }
}

diogofcunha on 26 Sep 2016

Hi there - thanks for this speedy reply. You definitely helped get me moving in the right direction. Is there a custom editor that I can use as a reference?

JordanBonitatis on 26 Sep 2016

Hi.

The key things when building a new editor are:

getInputNode this will tell the editor where to focus when you load it
getValue this is used by the grid to get the value you're trying to commit to the grid.

In your case, as you want a text area you're editor will end up being something like this:

class TextAreaEditor extends Component {
   getInputNode() {
      let domNode = ReactDOM.findDOMNode(this);
      return domNode.querySelector('textarea');
   }

   getValue() {
      // return the value depending on the way you decide to store the textarea text.
   }

   handleKeyDown(e) {
      if (e.key === 'Enter' && e.shiftKey) {
         e.stopPropagation();
      }
   }

   render() {
      return <textarea onKeyDown={this.handleKeyDown}></textarea>;
   }
}

diogofcunha on 27 Sep 2016

👍2

I implemented textarea, rendering is working fine but value of cell is not changing on pressing tab. It looks like onCommit is not triggering. Anyone has idea what could be the problem.