Devextreme-reactive: Keyboard support

[jesusgp22]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [ ] React Chart
• [x] React Grid
• [ ] React Scheduler

Description

Probably a similar issue to this one but I didn't find a satisfying answer there

I'm trying to develop a feature 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() {
....

}
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 am using controlled mode for SelectionState but it is unclear how to change the selection state from the event handlers in the CustomRoot component

Environment

• devextreme-reactive: 1.10.0
• react: 16.8
• browser: chrome
• bootstrap: 4
• react-bootstrap: none
• material-ui: none

[MaximKudriavtsev]

Hi @jesusgp22,
 
I have created an example of set selection by keypresses and used our Plugin and TemplateConnector components there. You can learn more about them in the DevExpress Reactive Core documentation.

[jesusgp22]

Thank you @MaximKudriavtsev this worked perfectly for most of my tables but I found that for tables that don't have a getRowId function defined this just deselects the currently selected row, should I create a row ID for every row?

I wonder if this a feature that other people request often, I've seen very common for tables that key arrows can be used to navitate a tree going up and down rows and to collapse/expand the tree, what would be required to turn this into an standalone plugin?

[MaximKudriavtsev]

@jesusgp22,

You are welcome! For complex scenarios, you should set the row id property so the Grid knows what row is current.
 
Our plans for this year are described in our current roadmap. We will take your suggestion into account when discussing our future development.

[churkin]

waiting for #2226

[LexDX]

It is also possible to use one of the following workarounds in this scenario:
1) Use plugins as it is suggested in this GitHub issue: https://github.com/DevExpress/devextreme-reactive/issues/532#issuecomment-468177879.
2) Use customization as in this demo: https://codesandbox.io/s/eloquent-kapitsa-f7bo7?file=/demo.js.

[MaximKudriavtsev]

Hi everybody,

Some time ago we started working on the 'Keyboard Navigation' feature for Reactive Grid. We've done research and prepared a discussion page that contains the suggested solution. Currently, we are working on the prototype. Your feedback is greatly appreciated.