Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataGrid and TreeList - Excel-Like Navigation #7271

Open
AntonSermyazhko opened this issue Mar 13, 2019 · 16 comments

Comments

Projects
None yet
4 participants
@AntonSermyazhko
Copy link
Contributor

commented Mar 13, 2019

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

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

@AntonSermyazhko

This comment has been minimized.

Copy link
Contributor Author

commented Mar 19, 2019

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

This comment has been minimized.

Copy link

commented Mar 20, 2019

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

@dxbykov

This comment has been minimized.

Copy link
Contributor

commented Mar 20, 2019

We release previews every two weeks.

@Im-Kevin

This comment has been minimized.

Copy link

commented Mar 20, 2019

OK,thanks

@Im-Kevin

This comment has been minimized.

Copy link

commented Apr 21, 2019

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

@AntonSermyazhko

This comment has been minimized.

Copy link
Contributor Author

commented Apr 22, 2019

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

This comment has been minimized.

Copy link

commented Apr 24, 2019

But I don't know how to focus cell.

@AntonSermyazhko

This comment has been minimized.

Copy link
Contributor Author

commented Apr 24, 2019

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

@genachka

This comment has been minimized.

Copy link

commented May 13, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented May 13, 2019

@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

This comment has been minimized.

Copy link

commented May 13, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented May 14, 2019

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

This comment has been minimized.

Copy link

commented May 14, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented May 15, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.