Yes!!! Success! This works but leaves you with focus no longer set to the grid, so you have to add:
grid.focus()
Works perfectly.
I will post code below for anyone else wishing to include a datepicker in the editor template of a custom column using keyboard navigation for fast/volume data entry.
Thank you so much.
JS event hander here is onKeyPress="isEnter()"
Code: HTML/ASPX
<eo:CustomColumn DataField="FieldValue" ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit" ClientSideGetText="on_column_gettext" Width="200">
<EditorTemplate>
<div id="div_DatePicker1" style="display:none">
<eo:DatePicker ID="DatePicker1" runat="server" onKeyPress="isEnter()"
ControlSkinID="None" DayCellHeight="16" DayCellWidth="19"
DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" DisableTextBox="False"
AllowMultiSelect="True" EnableKeyboardNavigation="True" AutoPostbackOnSelect="False">
Traps the ENTER key. Could expand this to trap for escape and use that to cancel the edit.
Code: JavaScript
function isEnter(evnt) {
evnt = (evnt) ? evnt : ((event) ? event : null);
if (evnt) {
var charCode = (evnt.charCode || evnt.charCode == 0) ? evnt.charCode : ((evnt.keyCode) ? evnt.keyCode : evnt.which);
if (charCode == 13) {
grid = eo_GetObject("Grid1");
grid.editCell(-1, -1, true);
grid.focus();
}
}
}
Important to add to custom column on_begin_edit a line to set focus to the datepicker control on edit:
Code: JavaScript
var datepicker = eo_GetObject("DatePicker1");
datepicker.setSelectedDate(eo_StringToDate(v));
setTimeout(function() { datepicker.focus(); }, 100);