Tab to next editable field
Tab to next editable field
Dear
I have implemented "Tab between columns". But I found it is too simple to support my project. I have a multiple read-only columns table. I have set fields option of editable plug-in. So editable know which column is editable, which isn't editable. I think editable know how to process tab key-donw event. "Tab between column" can't support latest column is non editable column. So it will show:
"uncaught exception: Unable to automatically determine field from source. Please specify the field name", when user press tab at latest editable column and want to move to next row's first editable column. My table's content layout is dynamic from ajax. So I set fields option dynamically. If editable plug-in doesn't support "tab next" nativelly. It will be very trouble to implement the "Tab between columns".
Thanks! Best Regards!
This question has accepted answers - jump to:
Answers
Hi,
The key thing with modifying the tab example is how to select which cell is selected next. You will see, for example the use of
cell.prev()andcell.next()in the example, where all cells are selected.Therefore, what I would suggest is that you use
columns.classNameto add a class to the columns you want to be editable (editablefor example) and then modify the tab code to select only only those cells. Unfortunately, from the jQuery documentation, you can't just usecell.prev('.editable'), you need to change it to useprevAllandnextAllsince some cells might be skipped (i.e.cell.prevAll('.editable')).Allan
Hi Allan
I have solved the problem by your suggest. But I have another question. Is it possible to make tab to next cell and make the cell's content to be selected, default ?
Thanks! Best Regards!
Sure - use the
focusevent on the input element and select the text. This is the top Google hit for "select text on focus" - you could just apply that to the Editor input elements for your field if you wanted it (field().input()).Allan
Hi Allan
Like this:
editor.field("cost_quote").input().on('focus', function () {$(this).select();});
Thanks!