Editor - inline edit - using arrow keys to navigate
Editor - inline edit - using arrow keys to navigate
GeorgeHelmke
Posts: 44Questions: 16Answers: 0
User like the data tables and editor, but we have some people who like to use arrow keys (especially up and down) to navigate between the same column on different rows. How can we accomplish that?
The other thing is the sheer size of the inline edit when it pops up. Can we get it down to 1/2 or 1/3 of the current width? Can we make it variable from column to column?
Thanks,
George
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Is this when inline editing mode? You could bind an event listener for the up and down keys to call
inline()
on the cell in the previous / next row - very much like the tabbing example and how it callsinline()
on the next cell when the tab key is pressed.Personally I like using up and down in a text box to move the cursor to the start / end of the text, but that might just be me ;-)
This is what bubble editing (
bubble()
) was written for. Inline editing is really only useful for very simple fields. Bubble editing however can contain complex information since it floats above the cell. Indeed I considered not having an inline mode at all...Certainly - it is controlled by CSS:
where
{fieldName}
is the name of the field you want to target.Regards,
Allan
Yes it is inline we are using. I will look at the tabbing example.
Thanks
And now I am not so sure about whether I have inline going or not. I looked at the tabbed example, and the cell in use is exactly the right size in the right place, and is a part of the table.
In my tables, the cell being edited jumps to a bigger size when focused.
That sounds like a CSS styling artefact. I've set up the CSS in my demos so there isn't a jump in the display, but if your rows are small, or your text box is large, there will be a display glitch.
The "Inspect element" option in your browser is probably the best way to look into it, or if you could give me a link tot he page I can take a look.
Thanks,
Allan
Sounds like a team viewer / Skype to me. Site is corporate behind a fire wall.
In case anyone else stumbles across this thread, we sorted it out by including the Editor stylesheet which includes styles to hide the field label when in inline mode - which was the main issue.
Allan
Still working on the arrow key moves. This code manages to move the cursor, but the old cell is still the one selected for editing, i.e., I manage the move, but not the change for what is being edited:
For the tab, the edit focus does move.
AND, after the record has been saved, I need to get the user back to where they were, so they can arrow down and edit the next one.
Hi,
Your code looks good to me. I've just tried running it on the Editor inline example here by sticking it in an event listener, running the code on the console, and then triggering inline editing:
When I press the down button it jumps down to the next row.
What happens when you run your code on your page? Any errors?
The only thing I can think of that would go wrong is if you have one or more hidden columns. That would knock the
cellIndex
out of alignment. For that thecolumn.index()
method could be used to translate from the column data index to the column visible index (the latter being what jQuery would need, since it is operating on the nodes that are in the DOM).Regards,
Allan
I had hidden columns, and a button, and I got rid of both. Same result. HOWEVER, I observed that actually, it goes into edit mode on every other row. Example
Edit
Not-Edit
Edit
Not-Edit
Here's the rack:
var tableSalesLine;
var editorSalesLine;
And if we take it where we really want to go, it would work like excel:
Arrow keys to navigate.
You land on a field. If you type, you replace contents completely. If you use arrow keys, you leave field.
F2 toggles the editor. Arrow keys allow you to move inside the text.
More info on selection: If I click on a cell in the top row, and arrow down, it works perfectly.
If I click on the second row to start with, then arrowing down has me in the every other edit mode.