Devextreme: DataGrid and TreeList - Excel-Like Navigation

[AntonSermyazhko]

The Problem

Keyboard navigation and editing process cannot be changed in the DataGrid and TreeList components.

The Proposed Solution

A new keyboardNavigation object allows you to customize keyboard navigation and editing.

Change the Enter key action

The enterKeyAction option specifies whether the Enter key moves focus or switches the cell to the editing state.

let widgetOptions = {
    keyboardNavigation: {
        enterKeyAction: "moveFocus" | "startEdit"
    }
}

Specify the focus movement direction

The enterKeyDirection option specifies whether focus moves to the next column or row or stays in place.

let widgetOptions = {
    keyboardNavigation: {
        enterKeyDirection: "column" | "row" | "none"
    }
}

Start editing on a key press

When the editOnKeyPress option is set to true, users can start editing when they press a key on the numeric or alphanumeric keypad. The editing.mode should be cell or batch.

let widgetOptions = {
    keyboardNavigation: {
        editOnKeyPress: true
    }
}

Configure Excel-like navigation

The shown configuration replicates keyboard navigation in Excel:

let widgetOptions = {
    keyboardNavigation: {
        enterKeyAction: "moveFocus",
        enterKeyDirection: "column",
        editOnKeyPress: true
    }
}

Try it

Live Sandbox

jQuery

Angular

Installation

Follow the installation guide from the release page and leave us feedback on this topic.

We Need Your Feedback

Take a Quick Poll

Do you find the keyboard navigation enhancements useful?

Get Notified of Updates

Subscribe to this thread or our Facebook and Twitter accounts for updates on this topic.

[Im-Kevin]

The effect I want is:
When the last line, enter switches to the next line, otherwise switches to the next column
So I can fill out multiple rows of data quickly.

[Im-Kevin]

I want to have a cursor when I click on Cell.

[AntonSermyazhko]

At present, we do not provide the possibility to switch to the next line with the Enter key in this scenario, but it will be possible in the next preview versions of our components. Follow the updates.
 

I want to have a cursor when I click on Cell.

Did you mean focused cell highlighting? If so, you can handle the onFocusedCellChanging event and set e.isHighlighted to true.

[Im-Kevin]

I want to ask when the next preview will be released.

[dxbykov]

We release previews every two weeks.

[Im-Kevin]

OK,thanks

[Im-Kevin]

I want to change to Edit Mode immediately when I want to jump.

[AntonSermyazhko]

Unfortunately, it is not clear to me what you mean by "when I want to jump".
I suppose you mean enabling the editing mode after some cell was focused by keyboard navigation.
In this case, you can handle the onFocusedCellChanged event where it is possible to enable the editing mode for the focused cell.

[Im-Kevin]

But I don't know how to focus cell.

[AntonSermyazhko]

Here is an example showing how to start editing a cell by its position.

[genachka]

Nice feature! The only other request I would have is to enable a way to use the controls within the cell. Using the current jquery example, you have a date control but there didn't seem to be a way to trigger with the keyboard for the calendar to open so having to click on the calendar icon with mouse kind of defeats the keyboard point. And of course I would expect controls like a dropdown or spinners, etc to be also usable by keyboard in this case.

[AntonSermyazhko]

@genachka, thank you for rating.
To open the DateBox popup editor by the keyboard, use the Alt+ArrowDown key combination as described in the corresponding topic.
Other our widgets with popup or spinners have keyboard support with similar behavior.

[genachka]

@AntonSermyazhko didn't know about that topic thank you. But to be honest, not very intuitive to do that. I noticed that for states the up/down arrows do work and that the number fields also support up/down arrows. At a minimum it would be helpful if within each of the date numbers up/down arrows worked and at least to me, more intuitive for calendar would be to either tab one more time and it would select the calendar icon and hit enter on it to show the calendar as I don't think anyone without some additional knowledge about that topic would ever think to hit alt down arrow.

Although, since you don't currently support up/down arrows on the individual date numbers -- then why wouldn't you support hitting the down arrow without the alt to open the calendar. Seems more intuitive to me.

[AntonSermyazhko]

At a minimum it would be helpful if within each of the date numbers up/down arrows worked and at least to me

To enable it, set the useMaskBehavior in editorOptions of the corresponding column.

columns: [
    . . . 
    {
        dataField: "BirthDate",
        dataType: "date",
        editorOptions: {
            useMaskBehavior: true
        } 
    }
    . . . 
],
 

 

then why wouldn't you support hitting the down arrow without the alt to open the calendar. Seems more intuitive to me

Use of a simple ArrowDown key to open a calendar popup in DataGrid may be confusing when a user wants to focus a bottom cell, for example. In this case, the user may edit a value he doesn't require.
Here is a sample.

[genachka]

Nice!!

To enable it, set the useMaskBehavior in editorOptions of the corresponding column.

I think the behavior is no different than the already default behavior with a cell that has a dropdown. When you explicitly press enter on the cell it puts it in to edit mode, I don't think the expectation is for then down arrow should move out of that cell.

Use of a simple ArrowDown key to open a calendar popup in DataGrid may be confusing when a user wants to focus a bottom cell, for example. In this case, the user may edit a value he doesn't require.

The sample looks good to me and is what I would have expected as the default behavior.

Here is a sample.

[AntonSermyazhko]

I think the behavior is no different than the already default behavior with a cell that has a dropdown. When you explicitly press enter on the cell it puts it in to edit mode, I don't think the expectation is for then down arrow should move out of that cell.

The more persuasive argument why we do not open a calendar popup by the ArrowDown key is that it will conflict DateBox behavior with the ArrowDown key when the useMaskBehavior option is true.

[dxbykov]

Thank you to everybody who gave us feedback on this feature. It's available in the v19.1 release. I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.