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: Cell Navigation support | CellEdit Mode options #5506

Conversation

David-Moreira
Copy link
Contributor

@David-Moreira David-Moreira commented May 11, 2024

Ok so while improving the cell edit feature I realized the following:

Cell navigation can just be a standalone feature. By activating the feature, both single clicking, using arrow keys & tabbing will navigate through the cells.
I was initially doing it as part of the cell edit mode, but if it's a standalone feature, the user can just activate whenever he wants. We can recommend to activate it in the docs for cell edit mode.

Introduced a new DataGridEditModeOptions. Here we'll have two new options:
CellEditOnSingleClick, CellEditOnDoubleClick that are self explanatory.
Here I would take the breaking change where we default to double click. Users can still enable the old behaviour by setting the CellEditOnSingleClick to true.

Just by adding the extra cell navigation and the single/double click the user has enough flexibility from what I've experienced.

All in all by just adding CellNavigable to a CellEdit enabled Grid the experience is much better!

Let me know your thoughts.

Notes:
You will see that we require a new bit of javascript for this feature, I did try to make it work in C#, but as you know, when you have alot of dynamic elements and you have to try to figure out stuff in DOM it gets really hard and cumbersome. I think it's best to do it in js.

@David-Moreira
Copy link
Contributor Author

Friendly reminder

@David-Moreira David-Moreira requested a review from stsrki May 23, 2024 19:41
@stsrki stsrki changed the title DataGrid | Cell Navigation support | CellEdit Mode options DataGrid: Cell Navigation support | CellEdit Mode options Jun 3, 2024
@mtbayley
Copy link
Contributor

mtbayley commented Jun 3, 2024

Hi @David-Moreira
I've reviewed this branch and I do like the added navigation features.

However, I am wondering if you are still considering adding these two features I mentioned in my feature request. #5383 (comment). These features would be extremely valuable for my users.

  • Typing any value on the keyboard would put the cell in editing mode.
  • Entering editing mode, selects all text of the current value, allowing a new value to be easily updated

@David-Moreira
Copy link
Contributor Author

Hello @mtbayley
Thanks for reviewing and helping us deliver a better feature.

Both your suggestions seem fine,

  • Typing any value on the keyboard would put the cell in editing mode.
  • Entering editing mode, selects all text of the current value, allowing a new value to be easily updated

Would you agree @stsrki ?
Do you guys think it's worth keeping these behind an optional flag or it's fine if the grid starts working like this?

Also any of you have any suggestions for this feature?
-> "selects all text of the current value"
I don't think I personally ever tried something like this, does blazor support this in some way? I'm guessing not? You guys know the js for this?

@stsrki
Copy link
Collaborator

stsrki commented Jun 4, 2024

Typing any value on the keyboard would put the cell in editing mode.

This seems fine to me. We can do this.

Entering editing mode, selects all text of the current value, allowing a new value to be easily updated

I also don't remember any time doing this. So I would skip it.


The question is how to opt-in. I would add an additional flag to the DataGridEditModeOptions.

@mtbayley
Copy link
Contributor

mtbayley commented Jun 4, 2024

The question is how to opt-in. I would add an additional flag to the DataGridEditModeOptions.

I agree. Options are good. What might work for me, may not work for someone else.

Also any of you have any suggestions for this feature?
-> "selects all text of the current value"
I don't think I personally ever tried something like this, does blazor support this in some way? I'm guessing not? You guys know the js for this?

I see Blazorise uses the autoNumeric library to select all on focus for the Numeric Picker component.

if (options.selectAllOnFocus.changed) {
newOptions.selectOnFocus = firstNonNull(options.selectAllOnFocus.value, AutoNumeric.options.selectOnFocus.doNotSelect);
}

Can you add something similar to your other input components?

https://github.com/autoNumeric/autoNumeric/blob/ea4a977c230c616fdcda6a5441c6009ce850d2c8/src/AutoNumeric.js#L6421-L6432

_onFocusIn(e) {
    if (this.settings.selectOnFocus) {
        // The whole input content is selected on focus (following the `selectOnFocus` and `selectNumberOnly` options)
        //XXX Firefox <47 does not respect this selection...Oh well.
        this.select();
    } else {
        // Or we decide where to put the caret using the `caretPositionOnFocus` option
        if (!AutoNumericHelper.isNull(this.settings.caretPositionOnFocus)) {
            AutoNumericHelper.setElementSelection(e.target, this._initialCaretPosition(AutoNumericHelper.getElementValue(this.domElement)));
        }
    }
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

This is how AG Grid works by default.

msedge_Mb5Ttz4B9L

@David-Moreira
Copy link
Contributor Author

@stsrki Could you evaluate @mtbayley suggestion about the select all focus?
Would probably be best to do it on a separate PR and merge it in after.

@stsrki
Copy link
Collaborator

stsrki commented Jun 12, 2024

We have an API on our input that could be used to select all text. But I would leave that for another PR.

@David-Moreira
Copy link
Contributor Author

We have an API on our input that could be used to select all text. But I would leave that for another PR.

Alright, my point is, if we do that feature for 1.6 or not, and wait for it on this PR?

@stsrki
Copy link
Collaborator

stsrki commented Jun 12, 2024

Do it in another PR. For 1.6.

@mtbayley
Copy link
Contributor

I appreciate your efforts to get this in 1.6. This will help me out a lot 🙂

@David-Moreira
Copy link
Contributor Author

@stsrki I just realized you said we already support it? Why do we need another PR then?

"We have an API on our input that could be used to select all text."

@David-Moreira
Copy link
Contributor Author

Done.
There was indeed already an api for selecting the text. No point in doing anything in a separate PR I guess?

@mtbayley Would you be so kind to take it for a spin if you have time?

@mtbayley
Copy link
Contributor

@David-Moreira Looks great! Everything is working how I would expect it to.

Maybe some more clarification in the documentation is what I would add.

image

  • Any key to to enter editing mode
  • Document CellEditSelectTextOnEdit, I think this should be highlighted in the docs since it is such a great feature, and you would only know about it if you stumbled upon it.

@David-Moreira
Copy link
Contributor Author

I'm now testing and it works mostly. But it still need some work. For example, it doesn't work as best with the focus feature.

  1. Focus the cell

image

2, Hit a key

image

  1. Hit b key

image

Notice how only the b is now written. Should it work like that or should it continue writing from a? Maybe we need to add an additional option to control the behavior?

  • select all on focus
  • move caret at the end on focus

I'm not sure actually. But you can always turn off the Select feature. But maybe the select feature should only select the text if the key pressed was a non text key, like enter or regular click

@stsrki
Copy link
Collaborator

stsrki commented Jun 19, 2024

Actually, from a UX perspective, it makes sense to select all when we double-click to edit the cell. But when we start typing we need to type all characters. Including the first that is now lost.

@mtbayley
Copy link
Contributor

mtbayley commented Jun 19, 2024

I had missed what @stsrki found. I agree, it should not select all on the first character entered. Instead the cursor should be at the end of the character entered (after overwriting previous text).

it makes sense to select all when we double-click to edit the cell

Agree

select the text if the key pressed was a non text key, like enter or regular click

Agree, this how AG grid works.

I also noticed that the Backspace key will clear the cell in AG Grid.

…and select are actual functions before invoking | Handle text vs numeric according to column type when updating cell edit
@David-Moreira
Copy link
Contributor Author

Done, thanks for the continuous feedback guys.

  • It should now only select the text under the same conditions AND if the text hasn't changed.
  • Backspace now clears
  • I found some bugs while testing, apparently our UpdateCellEditValue requires the values to be already in the destination type, so we had to try and do some conversions when trying to set strings, ints, decimals, dates, etc..
    • Not super happy with this, but when we're already boxing stuff, oh well... It works, that's what it matters. hehe
  • There was also another bug where apparently the js select function does not exist in a select html element, so it would throw an exception, I added a function check

@stsrki please review again.

@stsrki
Copy link
Collaborator

stsrki commented Jun 20, 2024

I've tested the new feature and it works fantastic. Still need to go review the code.

@mtbayley
Copy link
Contributor

Agree. It works great now. Excellent work @David-Moreira

Copy link
Collaborator

@stsrki stsrki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

Made some cleaning since I have installed SonarLint installed and it was complaining with some warnings. There are a bunch more I didn't wanted to do them as I don't want to make unwanted bugs. We can do the rest later.

Please check and if you agree I will merge

@David-Moreira
Copy link
Contributor Author

LGTM.

Made some cleaning since I have installed SonarLint installed and it was complaining with some warnings. There are a bunch more I didn't wanted to do them as I don't want to make unwanted bugs. We can do the rest later.

Please check and if you agree I will merge

Yea I'm okay with that, I'd stick to this PR changes as much as possible and do those changes in a separate PR, so we can properly identify them if anything goes wrong.

@stsrki
Copy link
Collaborator

stsrki commented Jun 28, 2024

LGTM.
Made some cleaning since I have installed SonarLint installed and it was complaining with some warnings. There are a bunch more I didn't wanted to do them as I don't want to make unwanted bugs. We can do the rest later.
Please check and if you agree I will merge

Yea I'm okay with that, I'd stick to this PR changes as much as possible and do those changes in a separate PR, so we can properly identify them if anything goes wrong.

If you want you can also install SonarLint yourself. It's a free extension for VS.

@stsrki stsrki merged commit e6d6147 into master Jun 28, 2024
2 checks passed
@stsrki stsrki deleted the 5383-allow-navigating-datagrid-with-keyboard-when-in-editmode=datagrideditmodecell branch June 28, 2024 09:23
@github-actions github-actions bot locked and limited conversation to collaborators Jun 28, 2024
@David-Moreira
Copy link
Contributor Author

LGTM.
Made some cleaning since I have installed SonarLint installed and it was complaining with some warnings. There are a bunch more I didn't wanted to do them as I don't want to make unwanted bugs. We can do the rest later.
Please check and if you agree I will merge

Yea I'm okay with that, I'd stick to this PR changes as much as possible and do those changes in a separate PR, so we can properly identify them if anything goes wrong.

If you want you can also install SonarLint yourself. It's a free extension for VS.

Oh it's free? I might give it a go. :) Thanks for the suggestion.

@stsrki
Copy link
Collaborator

stsrki commented Jun 28, 2024

Brace yourself for a lot of warnings :) But I guess it is a good thing to be as comply as possible with the standards.

@David-Moreira
Copy link
Contributor Author

Brace yourself for a lot of warnings :) But I guess it is a good thing to be as comply as possible with the standards.

Depends on who defines those standards, and if they make sense to follow. As always, let's not just blindly follow some tool. haha

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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