Print Page - [SOLVED] Datagrid Cell Editor, on keypress handle

Title: [SOLVED] Datagrid Cell Editor, on keypress handle
Post by: kifni41 on November 05, 2019, 12:28:45 AM

Hi,

Is there any way to catch onKeypress from cell editor. I want to end the datagrid by pressing enter, and may be another function like tab for switching to the next editor.

Code:

<GridColumn key='inikey3' title="DESCRIPTION" field="description" rowspan="2"  width="300px"
     editable
     editor={({ row }) => (
          <TextBox
              ref={this.textInput}
              value={row.description}
              onKeyPress={this.handleKeyHere.bind(this)}
          ></TextBox>
 )}
></GridColumn>

//we want to to like this
handleKeyHere(event) {
  if(event.keyCode === 13) {
    this.datagrid.endEdit();
  }
}

Thanks.

Title: Re: Datagrid Cell Editor, on keypress handle
Post by: jarry on November 05, 2019, 01:55:40 AM

Please wrap the TextBox component with a new element and bind the keydown event on it. Please look at this code.

Code:

<GridColumn field="name" title="Name" editable
  editor={({ row }) => (
    <div onKeyDown={event => this.handleKeyDown(event)}>
      <TextBox value={row.name}></TextBox>
    </div>
  )}
/>

Title: Re: Datagrid Cell Editor, on keypress handle
Post by: kifni41 on November 07, 2019, 12:12:08 AM

Thanks, your sample code works :)

EasyUI Forum

General Category => EasyUI for React => Topic started by: kifni41 on November 05, 2019, 12:28:45 AM