Allow navigating DataGrid with keyboard when in EditMode="DataGridEditMode.Cell"

[mtbayley]

Allow navigating DataGrid with keyboard when in EditMode="DataGridEditMode.Cell"

[oaldrian]

We have one client that needs this rapid editing of data in a grid.
The requirement from the customer was to get as close to Excel style editing as possible.
Currently we use a different framework for the grid part of the application because this was a must have for the customer. TBH I would happily switch to the Blazorise DataGrid if it supported this navigating

I checked what the difference in features is and the only thing "missing" from the Blazorise DataGrid would be the arrow key navigation

As this feature is mostly intended for large data collections (at least in our case), it would be great if the DataGrid has a "Ultra Narrow" feature which includes the edit components. I know this is possible with custom css, but it would be nice to have it from the get go. The goal there would be also to look like an Excel table.

[mtbayley]

As for whether the the cell is in Edit mode right away or not, I'm personally still unsure.
I personally feel like it's intuitive like it is now, focusing the cell starts the cell edit.

I am indifferent to what the default should be, but I think there should be a mode where single click is used for selection, and double click for edit. Often there are times when the user wants select a value, but not edit it (for example, when they copy a cell's value)

So you guys do think it's best if the cell is highlighted instead while navigating? And shouldn't be in edit mode when it's focused?

Yes, Agree

I believe that just by providing this feature, this would address your "complaints"

Yes, this would make the grid so much more powerful. I'm not really complaining, just trying to make it better! The improvements to the DataGrid in the last year has been amazing, so please keep up the good work. 👍

[David-Moreira]

Yea the more we talk about this, I'm more fond of mtbayley's suggestions and making it so, navigation is independent of edit mode. Basically like the ag grid works.

This means, that by default if you are focused on a cell, you can navigate with arrow keys + tabbing.
If you enter on edit mode in the cell (any key except navigation keys, double click, enter), then it applies whatever that input key behaviours are, be it the datetime, numeric behaviours or just the text behaviour where you can move to the begin/end or left/right one character at a time.

[David-Moreira]

Tab and Shift tab should already move between cells.
I'm not sure Enter and Shift+Enter editing cell below and above is intuitive, I personally never seen that?
Enter is usually a commit key. And it commits the value presently.

So would you not agree with the current shortcuts and implementation?

[stsrki]

The Enter key is the remnant of the DOS era, where it was used for navigation of the "forms." I'm not sure if we would want to have that in Blazorise, as it is not standard behavior on the web. It would break any AODA compatibility that we plan to have later.

[mtbayley]

What my users are looking for is "Excel like" editing. Currently, it is very difficult to input a column of values because there is no way to navigate vertically with the keyboard. You have to type your value, then use the mouse to move to the next row in the same column.

In Excel and that Syncfusion demo, cell navigation works as described above.

You can also use the arrow keys to move between cells. Maybe that could be implemented as an opt-in feature? Or allow the user to customize the keys which are used for navigation?

[mtbayley]

Syncfusion has a whole page dedicated to keyboard navigation. There are extra things in there such as inserting or deleting a row, but the cell navigation is a big one for us.
https://blazor.syncfusion.com/demos/datagrid/keyboard-navigation

I think the current rapid editing feature in Blazorise is very close to be able to used for entering in lots of data for our ERP application

[stsrki]

The way how I see it we would have to change how we do cell editing. Now, when we focus on the cell, it is immediately in edit mode. With keyboard navigation that would have to change and edit mode will happen either on dbl click, or F2 for example.

[mtbayley]

It would be nice to have some more opinions from the community on how this should work. Is anyone else using the DataGrid with rapid editing in a production environment?

Tagging @oaldrian, @WillianGruber, @cowsen, @rbillot as they have been involved in past issues related to rapid editing.

[mtbayley]

That's a bit where I'm at too. I'm currently working on a project that requires extensive editing in grids. I'd hate to ditch Blazorise DataGrid for some other framework. It is so so close to being usable for large data editing.

[David-Moreira]

Well I just opened Excel, and it so happens that indeed Enter and Shift+Enter do navigate up and down. I personally did not know about this. And I honestly have no idea if regular users are generally acquainted with this?

That isn't to say the same should happen in the web world as I don't think that's commonly seen? And again the problem is that indeed Enter is generally a commit key and we're currently using it as such.

Would you guys agree that it makes sense to navigate with the arrows keys by default?
Maybe have it be configurable somehow? (Even if it was configurable, you would still have the "problem" where you cannot use reserved keys, like Enter?)

[oaldrian]

That isn't to say the same should happen in the web world as I don't think that's commonly seen? And again the problem is that indeed Enter is generally a commit key and we're currently using it as such.

Enter commits in Excel as well, as it navigates.
The difference is, that Excel basically is in "edit mode" all the time, and does not need to jump in and out of that.

From my POV it would be sufficient to not have the Enter key navigation.

Would you guys agree that it makes sense to navigate with the arrows keys by default?

Yes.

Maybe have it be configurable somehow? (Even if it was configurable, you would still have the "problem" where you cannot use reserved keys, like Enter?)

Again, only from my POV, but I think it would be sufficient to have only the arrow keys

[mtbayley]

I also think it's acceptable to not use the Enter key for navigation. Arrow keys (along with Tab) would work. It probably isn't necessary to make this configurable.

This is my opinion on how I think editing and navigation should work:

• Navigation with arrow keys would work only when the grid is not in editing mode
• The current cell would need to be highlighted in some way (currently no highlighting to know which cell is selected)
• Typing any value on the keyboard would put the cell in editing mode.
• Single click selects a cell, double click edits a cell by default. This could be configurable - Blazorise 1.5 allows for single click editing, which may be useful in some scenarios.
• The Enter key would enter or exit editing mode (commit the value)
• Entering editing mode, selects all text of the current value, allowing a new value to be easily updated
• When in editing mode, the arrow keys would move the keyboard cursor within the editing control.

Nice to have features (would possibly be separate feature requests):

• Copy (Ctrl+C) and Paste (Ctrl+V) would work on any cell and update the value if in editing mode or not.
• Allow drag to edit using a caret at the bottom of the cell to batch copy a value to many cells (just like Excel).

This is how ag-grid works. I think it does it well.
https://ag-grid.com/javascript-data-grid/keyboard-navigation/#navigation

https://www.ag-grid.com/example/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github

@David-Moreira I'm happy to provide feedback once you have a working version of something like this. Just let me know.

[David-Moreira]

Thank you for your feedback guys.
And thanks for the detailed suggestions @mtbayley .

Ok, so it seems like there is consensus with the arrows keys, so that's definitely something we need to take a look at. And I believe that just by providing this feature, this would address your "complaints" and make the feature pretty excel like would it not?

---

As for whether the the cell is in Edit mode right away or not, I'm personally still unsure.
I personally feel like it's intuitive like it is now, focusing the cell starts the cell edit.
The problem is this:

When in editing mode, the arrow keys would move the keyboard cursor within the editing control.

In order to have both, you are right that navigation & edit should be separated.

So you guys do think it's best if the cell is highlighted instead while navigating? And shouldn't be in edit mode when it's focused?
It should be :
Double Click, typing or Enter key triggers cell edit on whatever cell is highlighted just like @mtbayley suggested?

@stsrki would you also agree with @mtbayley suggestions.
I personally like them way more then how the syncfusion example works.
I do like how the ad-grid works. Thanks for posting the example.

[stsrki]

I agree we should add navigation with arrow keys. I also agree that we will need to have an option to define the selection mode and when to go into edit mode. Single, or double click. This is needed so that users can have more freedom to define the behavior.

But, once we are in edit mode, I can already see one thing that might be problematic. If the input field is numeric or date/time type, pressing the Up or Down keys would, by default(native browser behavior), increase or decrease the value. It will not navigate away from it. Excel always uses a "string" type input when editing and only formats it once the edited cell loses focus.

I'm not really sure how to handle this. Should we preventDefault for up/down keys in edit mode? Or maybe use string input(TextEdit) for everything and format it on focus lost as Excel does it?

[mtbayley]

An option to prevent default up and down would be nice. I wouldn't say it's critical if we can use the enter key to enter/exit editing mode.

[stsrki]

I just tried the AG Grid. And found it very intuitive.