Tab to next editable field

ezrachen

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!

allan

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() and cell.next() in the example, where all cells are selected.

Therefore, what I would suggest is that you use columns.className to add a class to the columns you want to be editable (editable for example) and then modify the tab code to select only only those cells. Unfortunately, from the jQuery documentation, you can't just use cell.prev('.editable'), you need to change it to use prevAll and nextAll since some cells might be skipped (i.e. cell.prevAll('.editable')).

Allan

ezrachen

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!

allan

Sure - use the focus event 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

ezrachen

Hi Allan

Like this:
editor.field("cost_quote").input().on('focus', function () {$(this).select();});

Thanks!