Editor - Keyboard Nav Inline edit

Thanigai

I am unable to use arrow keys while editing a cell. The arrows key event causes the control to go out of edit mode and navigates.
Is this a limitation, if so please provide a solution.

allan

That's not a limitation but a feature :-). The KeyTable operation with Editor is designed to operate like Excel, which operates in the way you describe.

Allan

Thanigai

OMG! Excel doesn't operate this way. I can edit a cell and use arrow keys inside excel cell

allan

For me when I type to edit a cell and then press the up arrow focus moves to the cell above in Excel. KeyTable is designed to operate in the same way.

If you would prefer it didn't do that, then you could remove that feature from the source.

Allan

Thanigai

Not the up arrow. Left & Right arrow keys.
For Eg: In excel, I have a value "Bored of Education" I can edit the cell and move to "Bored" and change to "Board".
But here, I need to erase the complete cell content and enter new data.

allan

Is this if you double click in the cell (in Excel)? In that case, yes you can use the left / right arrow keys to move between characters, but a single click would have the arrow keys move the cell focus.

Currently KeyTable doesn't have double functionality to match Excel. You would need to use the mouse to move the cursor position.

Allan

kelbyt

Yes i am having this same issue. We want to be able to click on the cell and have the cursor be at either the end or beginning of the text/value without selecting the value. Users are accidentally typing over data and tabbing or hitting enter and it saves off but they do not know what was there originally.

allan

I think this is the default behaviour when an input is focused and it has text. KeyTable / Editor isn't doing anything special there. I'll look into the options available for positioning the cursor exactly with Javascript.

Allan

sliekens

You can prevent the arrow keys from exiting inline editing by setting the editorKeys option to tab-only. This way, the arrow keys get their standard behavior back while editing an input field.

('#example').DataTable(
{
    keys: {
        editor: editor,
        editorKeys: 'tab-only'
    }
});

kelbyt

Thank you for the responses. The tab-only option is not working for me, it is still exiting when i try to use the arrow keys. Any help on this is greatly appreciated.

map@odenterprise.org

The tab-only option worked for me. I can now use arrow keys to navigate between columns and rows, press enter to edit a field and press enter to save changes. While editing inline, I can use arrow keys to navigate between cell content.

vg10

I was not able to get tab-only option working either. I had to add this piece to ignore arrow keys. It sounds like the tab-only option is buggy.

keys: [ "\t".charCodeAt(0) ]

lingster

I had a similar requirement, so if you want the left+right arrow key to move within the text in a cell rather than moving to the focus to the adjacent cell, you can just specify exactly which keys will be handled by datatables for navigation:

('#example').DataTable(
{
    keys: {
        keys: [27/*esc*/, 33/*pg-up*/, 34/*pg-down*/, 35/*end*/, 36/*home*/, /*37left*/, 38/*up*/, /*39right*/, 40/*down*/],                    
    }
});

Just exclude the key codes for left/right as per the example above.