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 - keyboard navigation improvements #5302

Closed
dxbykov opened this issue Sep 5, 2018 · 17 comments

Comments

Projects
None yet
8 participants
@dxbykov
Copy link
Contributor

commented Sep 5, 2018

The Problem

Developers and end-users that use the DevExtreme DataGrid and TreeList components require the following features:

  • Keyboard navigation to DataGrid/TreeList elements (headers, filtering and paging controls, etc.)
  • Excel-like keyboard navigation between grid cells for fast data editing
  • Focused row highlighting and keyboard support
  • The ability to implement custom keyboard-related scenarios

The Proposed Solution

Accessibility improvements

You will be able to use the keyboard to set focus on the following DataGrid/TreeList elements:

  • Headers (for sorting and filtering)
  • Regular rows (for selection and expansion/collapse)
  • Master-detail rows
  • Paging controls
  • Grouping controls

Excel-like editing

Currently, a user can only move from column to column when editing grid cells. We are planning to support a faster navigation mode in our TreeList and DataGrid that allows you to move from one row to another within a column.

This Excel-like editing process will allow you to:

  1. Use the arrow keys to move between cells;
  2. Press a character key to enter a new value in the focused cell. Note that you cannot change the cursor’s position until you press F2;
  3. Press ENTER or an arrow key to save changes and navigate to the next cell.

You can press F2 to switch to a mode in which you can change the cursor’s position inside the cell using the arrow keys. In this case, only ENTER saves the changes.

Select cell text on edit start

 
When editing starts, the cell text gets selected. This is conventional behavior, and it will become default.

editing: { 
    selectTextOnEditStart: false // disable the feature
} 

Focused row and cell

You will be able to do the following:

  • Enable/disable focusing a row;
  • Highlight a focused row;
  • Move the focus to another row using the mouse or keyboard;
  • Get and set the focused row using the focusedRowIndex or focusedRowKey option;
  • Navigate to a row using the navigateToRow(key) method (and automatically switch to a particular data page if necessary);
  • Get and set the focused column using the focusedColumnIndex option.

The following events will allow you to control navigation:

  • onFocusedCellChanging
    • Arguments:
      • cellElement
      • prevColumnIndex
      • prevRowIndex
      • newColumnIndex
      • newRowIndex
      • newRowData
      • cancel
  • onFocusedCellChanged
    • Arguments:
      • cellElement
      • columnIndex
      • rowIndex
      • rowData
  • onFocusedRowChanging
    • Arguments:
      • rowElement
      • prevRowIndex
      • newRowIndex
      • newRowData
      • cancel
  • onFocusedRowChanged
    • Arguments:
      • rowElement
      • rowIndex
      • rowData

We Need Your Feedback

Take a Quick Poll

Do the new keyboard navigation features meet your needs?

Live Sandbox

Focused Row Example

Get Notified of Updates

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

@dxbykov dxbykov self-assigned this Sep 5, 2018

@MightyFo0l

This comment has been minimized.

Copy link

commented Sep 6, 2018

What about mouse buttons? Buttons like middle mouse click?
Also I want to ability to -for example- deselect a row using the right mouse button.

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Sep 6, 2018

@MightyFo0l Thank you for the feedback. The features you've mentioned are in our backlog. Currently, they are not high priority, but we'll consider introducing them in future updates. As a workaround, to handle a right mouse click, you can refer to this example.

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Sep 7, 2018

Update: According to the external feedback, the new 'Select cell text on edit start' section has been added.

@m-yazdani

This comment has been minimized.

Copy link

commented Sep 12, 2018

is it possible to add copy cell value to another cells with mouse drag, just like what excel does.

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Sep 13, 2018

@m-yazdani Thank you for the feedback. We don't have plans to implement the feature you are talking about. It looks like a feature of a Spreadsheet component that DevExtreme doesn't have yet.

@m-yazdani

This comment has been minimized.

Copy link

commented Sep 13, 2018

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Sep 13, 2018

We expect to have a release in the mid-November.

@Shiko1st

This comment has been minimized.

Copy link

commented Sep 18, 2018

At last! Can't wait for the release date!

default

@apis3445

This comment has been minimized.

Copy link

commented Sep 20, 2018

Could you consider drag and drop rows, for move rows in the greed, example the last row drag to be the first row?

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Sep 21, 2018

Hi @apis3445,

Could you consider drag and drop rows

It's in our Roadmap for 2019.

@FabianoCastro

This comment has been minimized.

Copy link

commented Sep 30, 2018

Hi, what do you think about "Copy a formula by dragging the fill handle in Excel", I find it very useful. ;)

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2018

Hi @FabianoCastro,

Thank you for your suggestion. It's not in our plans for v18.2. Could you please clarify if you find it helpful while editing Excel spreadsheets or while working with data records in DataGrid? What are your real-world scenarios?

@FabianoCastro

This comment has been minimized.

Copy link

commented Oct 2, 2018

Hi @dxbykov

Something similar to the image, when you click on "vanishing point" and drag down, fill in the cells below.

image

The example is in Excel, but I´m suggesting in DataGrid in topic "Excel-like editing"

Other example
https://support.office.com/en-us/article/copy-a-formula-by-dragging-the-fill-handle-in-excel-for-mac-dd928259-622b-473f-9a33-83aa1a63e218

@klawusel2121

This comment has been minimized.

Copy link

commented Nov 13, 2018

I would like to see the selection on cell focus asap

@m-yazdani

This comment has been minimized.

Copy link

commented Dec 8, 2018

@dxbykov
hey boddy, haven't you finished related tasks of this issue yet?

@dxbykov

This comment has been minimized.

Copy link
Contributor Author

commented Dec 11, 2018

@m-yazdani
Hi, we've released the features described in the 'Focused row and cell' section. The rest is under development.

@AntonSermyazhko

This comment has been minimized.

Copy link
Contributor

commented Mar 18, 2019

We have published a preview version of the keyboard navigation enhancements in DataGrid and TreeList. I'm closing this issue.
You are welcome to leave your feedback and continue this discussion here.

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.