Comments (17)
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.
from blazorise.
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. 👍
from blazorise.
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.
from blazorise.
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?
from blazorise.
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.
from blazorise.
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?
from blazorise.
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
from blazorise.
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.
from blazorise.
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.
from blazorise.
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.
from blazorise.
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
?)
from blazorise.
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
from blazorise.
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.
from blazorise.
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.
from blazorise.
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?
from blazorise.
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.
from blazorise.
I just tried the AG Grid. And found it very intuitive.
from blazorise.
Related Issues (20)
- [2.0] DataGrid: Change Width from string to IFluentSizing
- Add MultiSelection to Datagrid SelectColumn HOT 13
- DataGrid.SelectedRow doesn't work - what am I doing wrong? HOT 3
- Expand Collapse Buttons for Data Grid HOT 7
- LicenseChecker is null problem HOT 4
- Transferlist captions HOT 3
- [Bug]: Theme Generator registered as Singleton is not thread safe HOT 5
- [Bug]: SignaturePad -- update SignaturePad.razor.cs to include latest vendor options: options.ratio
- [Bug]: Bootstrap 5: ColumnSize uses wrong css class HOT 8
- TransferList binding to Items HOT 3
- Net8, I need to create a Blazor Webassemby app with Blazorise and bootstrap5
- Docs: write the PostedOn dates for all new entries HOT 1
- [Bug]: Validation is still not working for NumericPicker HOT 1
- [Bug]: Button in dataGrid is not clickable for a few second on first load(flickering) HOT 21
- [Bug]: FileEdit button text shows selected file name after selection
- 1.6 Support Change Log
- [Bug]: NullReferenceException thrown in BaseChart::LimitDataSets method HOT 2
- TreeView: add virtualization HOT 1
- RichTextEdit: support for table
- [Bug]: Numerica Edit's do not allow a zero after a decimal HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazorise.