Devextreme-reactive: KeyPress events on grid?

[linuxhype]

So I tried getting the grid to register a keyPress event and handle it (I wanted to use arrow keys to go through pages in Paginated grid) but using the default way in react something like:

  changeCurrentPage(page) {
    this.setState({ currentPage: page });
  }

  handleKeyDown = (e) => {
    e.preventDefault();
    console.log("Triggered handle");
    if (e.nativeEvent.keyCode === 39) {
      console.log('This is right!');
      this.changeCurrentPage(this.state.currentPage+1);
    } else if (e.nativeEvent.keyCode === 37) {
      console.log('This is left!');
      this.changeCurrentPage(this.state.currentPage-1);
    }
  }

<Grid
                  onKeyPress={this.handleKeyDown}

                  columns={[
                      { name: 'id', title: '#' },
                  ]}
                >
 . . . .

I tried onKeyDown and onKeyPress in parent divs as well as Grid with no luck. Any demo / docs on how to handle keyPress events on the grid?

[SergeyAlexeev]

Hi,
 
In your case, I suggest you handle the onKeyDown event of the Grid's parent element.
Note that you need to add the tabIndex attribute to the element. A similar issue is described here.
 
This sample shows how it works in action.

[linuxhype]

Spasiba!

[gwmaster]

hi the sample code
This site can’t be reached
can you show example how handle keyboard navigation on VirtualTable Tree

[SergeyAlexeev]

Hi,

Would you please clarify what exactly key actions you want to handle?

[jesusgp22]

Hi, I'm trying to develop a similar feature but instead of changing the pagination I want to use up and down arrows to select the previous or next row on the table, I am using mousetrap to bind hotkeys to an element, here is an example of what I have:

on the grid:

render() {
   <Grid rows={...} columns={...} rootComponent={CustomRoot}>
      ....
    </Grid>
}

The CustomRoot class:

export default class CustomRoot extends PureComponent {

    constructor(props) {
        super(props)
        this.rootRef = React.createRef()
    }

    componentDidMount() {
        const mousetrap = new Mousetrap(this.rootRef.current);
        mousetrap.bind('up', this.handleUpKey);
        mousetrap.bind('down', this.handleDownKey);
    }

    handleUpKey = () => {
        console.log("UP")
    }

    handleDownKey = () => {
        console.log("DOWN")
    }

    render() {
        const { children, className, ...restProps } = this.props
        return (
            <div
                className={classNames('d-flex flex-column', className)}
                {...restProps}
                style={{ height: '100%' }}
                tabIndex="0"
                ref={this.rootRef}
            >
                {children}
            </div>
        )
    }
}

I was able to attach event listeners to the root of the grid but I don't know how to make those event listeners trigger actions to change the selected state, I've noticed that it is possible to create actions and getters with pluggins but it is unclear how to achieve this with components passed as props like rootComponent

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.