Skip to content

Add listenToKeys option also to list, datepicker and textarea #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ircama wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add listenToKeys option also to list, datepicker and textarea #101

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dec2d5b
Add listenToKeys to list, datepicker, textarea
Ircama Jul 25, 2022
9ea6a17
update
Ircama Jul 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions js/dataTables.cellEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
}
switch (inputType) {
case "list":
input.html = startWrapperHtml + "<select class='" + inputCss + "' onchange='$(this).updateEditableCell(this);'>";
input.html = startWrapperHtml + "<select class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onchange='$(this).updateEditableCell(this);'>";
$.each(inputSetting.options, function (index, option) {
if (oldValue == option.value) {
input.html = input.html + "<option value='" + option.value + "' selected>" + option.display + "</option>"
Expand All @@ -172,15 +172,15 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
input.focus = false;
break;
case "list-confirm": // List w/ confirm
input.html = startWrapperHtml + "<select class='" + inputCss + "'>";
input.html = startWrapperHtml + "<select class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + ">";
$.each(inputSetting.options, function (index, option) {
if (oldValue == option.value) {
input.html = input.html + "<option value='" + option.value + "' selected>" + option.display + "</option>"
} else {
input.html = input.html + "<option value='" + option.value + "' >" + option.display + "</option>"
}
});
input.html = input.html + "</select>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = input.html + "</select>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.focus = false;
break;
case "datepicker": //Both datepicker options work best when confirming the values
Expand All @@ -191,7 +191,7 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
break;
}
jQuery(".datepick").datepicker("destroy");
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss + "' value='" + oldValue + "'></input> &nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='text' name='date' class='datepick " + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " value='" + oldValue + "'></input> &nbsp;<a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
setTimeout(function () { //Set timeout to allow the script to write the input.html before triggering the datepicker
var icon = "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif";
// Allow the user to provide icon
Expand All @@ -208,22 +208,22 @@ function getInputHtml(currentColumnIndex, settings, oldValue) {
},100);
break;
case "text-confirm": // text input w/ confirm
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "' value='"+oldValue+"'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " value='" + oldValue + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
case "undefined-confirm": // text input w/ confirm
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "' value='" + oldValue + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " value='" + oldValue + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
case "textarea":
input.html = startWrapperHtml + "<textarea id='ejbeatycelledit' class='" + inputCss + "' onfocusout='$(this).updateEditableCell(this)' >"+oldValue+"</textarea>" + endWrapperHtml;
input.html = startWrapperHtml + "<textarea id='ejbeatycelledit' class='" + inputCss + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onfocusout='$(this).updateEditableCell(this)' >"+oldValue+"</textarea>" + endWrapperHtml;
break;
case "textarea-confirm":
input.html = startWrapperHtml + "<textarea id='ejbeatycelledit' class='" + inputCss + "'>"+oldValue+"</textarea><a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = startWrapperHtml + "<textarea id='ejbeatycelledit' class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + ">" + oldValue + "</textarea><a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
case "number-confirm" :
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='number' class='" + inputCss + "' value='"+oldValue+"'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
input.html = startWrapperHtml + "<input id='ejbeatycelledit' type='number' class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " value='" + oldValue + "'" + (listenToKeys ? " onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + "></input>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).updateEditableCell(this)'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
break;
default: // text input
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "' onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "'></input>" + endWrapperHtml;
input.html = startWrapperHtml + "<input id='ejbeatycelledit' class='" + inputCss + "'" + (listenToKeys ? "' onkeyup='if(event.keyCode==13) {$(this).updateEditableCell(this);} else if (event.keyCode===27) {$(this).cancelEditableCell(this);}'" : "") + " onfocusout='$(this).updateEditableCell(this)' value='" + oldValue + "'></input>" + endWrapperHtml;
break;
}
return input;
Expand Down