Hello,
I am using Editor with KeyTable and inline editing, and I have some "select" (drop-down) fields in my DataTable. I am working in IE, so when a select cell is highlighted, I can push Alt + Up or Alt + Down, and the drop-down list opens. However, I cannot navigate up and down the list with the arrow keys, because as soon as I hit an arrow key, the list closes and the focus jumps to an adjacent cell (because of KeyTable, I assume).
I have tried the workaround proposed in a comment on this thread (https://datatables.net//forums/discussion/35820) -- that is, disable KeyTable on "Alt" keydown event -- but that has just introduced more problems for me. Has there been a fix implemented in more recent updates of DataTables/Editor? Or, does an easier work-around exist?
I've posted some of my code below, including handling of the Enter key. "nameDt" is the name of the variable that holds my DataTable. The "MarketSegment" and "SIC" fields are the two select fields in my table. I wanted the drop-down to be activated as soon as the cell is in focus. ("#nameView" is the ID of my HTML table element.) The code works decently, but when you are navigating in the list and you press Enter, you then cannot press Alt + Down again to re-open the list. (Also, handling the Escape key introduces its own problems.)
Thanks,
Joe
nameDt.on('key-focus', function (e, datatable, cell, originalEvent) {
focusedColIdx = cell.index().column;
focusedRowIdx = cell.index().row;
var cellDataField = nameDt.column(focusedColIdx).dataSrc();
if (cellDataField == "MarketSegment" || cellDataField == "SIC") {
nameEditor.inline({ row: focusedRowIdx, column: focusedColIdx }, {
onEsc: 'none'
});
$('#nameView').keydown(function(event){
if (event.which == 18) {
event.preventDefault();
nameDt.keys.disable();
}
});
$('#nameView').keydown(function (event) {
if (event.which == 13) {
$('td.focus select').blur();
nameEditor.inline({ row: focusedRowIdx, column: focusedColIdx }, {
onEsc: 'none'
});
$('div.DTE_inline select').focus();
nameDt.keys.enable();
}
});
nameDt.one('key-blur', function (e, datatable, cell) {
nameEditor.submit();
});
}
});