A bit more involved than the title indicates, though. We've developed a search control (mark-up and some code below) which uses a RadAjaxPanel to set dates. When the date changes, as part of the ajax postback, we go look up valid data for that date range and populate other search criteria.
All that's working great; the request I got was to handle the enter key being pressed and submit a search. Of course, I'll want to apply it to whatever control has focus when an enter key is hit, but the textboxes in the date picker controls seems like an obvious place to start.
I've tried following this thread, but I'm not really getting it. I'm not sure what event I should hook into to notice an enter key. It doesn't seem like any client-side event is exposed which has to do with the text box of the date picker.
The script I've cobbled together is invoked by a change when you use the actual date-picking UI part of the date picker control, so that's not quite what I'm looking for. An error is raised saying that the object doesn't support this property or method, presumably when I'm trying to attach the event handler (I see the alert just before it).
Maybe I'm taking a completely wrong approach. I'm pretty lost on the direction to go, and need a push.
Control mark-up:
---------------------------
<%@ Control Language="C#" AutoEventWireup="false"
CodeBehind="SearchFilterUI.ascx.cs"
Inherits="Com.Wolfgang.Amadeus.gTime.Web.SearchFilterUI" %>
<%@ Register TagPrefix="radC" Namespace="Telerik.WebControls"
Assembly="RadCalendar.Net2" %>
<%@ Register TagPrefix="radCB" Namespace="Telerik.WebControls"
Assembly="RadComboBox.Net2" %>
<%@ Register TagPrefix="radA" Namespace="Telerik.WebControls"
Assembly="RadAjax.Net2" %>
<div>
<radA:RadAjaxPanel ID="radAjaxPanel" runat="server" LoadingPanelID="ajaxLoadingPanel">
<div id="divSearchPeriod" runat="server" style="float: left;">
<asp:Label ID="lblByPayPeriod" runat="server" Font-Bold="true" Font-Size="Medium"
Text="Search by Pay Period:"></asp:Label>
<br />
<asp:Label ID="lblPayPeriod" runat="server" Text="Pay Period:" Width="75 px"></asp:Label>
<radCB:RadComboBox ID="rcbPayPeriod" runat="server" AutoPostBack="true" MarkFirstMatch="true"
OnSelectedIndexChanged="rcbPayPeriod_SelectedIndexChanged">
</radCB:RadComboBox>
<br />
<asp:Label ID="lblYear" runat="server" Text="Year:" Width="75 px"></asp:Label>
<radCB:RadComboBox ID="rcbYear" runat="server" AutoPostBack="true" MarkFirstMatch="true"
OnSelectedIndexChanged="rcbYear_SelectedIndexChanged">
</radCB:RadComboBox>
</div>
<div style="float: left; width: 343px;">
<asp:Label ID="lblByDates" runat="server" Font-Bold="true" Font-Size="Medium" Text="Search by Dates:"></asp:Label>
<br />
<asp:Label ID="lblStart" runat="server" Text="Start Date:" Width="70 px"></asp:Label>
<radC:RadDatePicker ID="rcStart" runat="server" AutoPostBack="true" EnableMultiSelect="false"
OnSelectedDateChanged="rcStart_SelectionChanged" ClientEvents-OnDateSelected="HandleEnter">
</radC:RadDatePicker>
<br />
<div style="float: right;">
</div>
<asp:Label ID="lblEnd" runat="server" Width="70 px" Text="End Date:"></asp:Label>
<radC:RadDatePicker ID="rcEnd" runat="server" AutoPostBack="true" EnableMultiSelect="false"
OnSelectedDateChanged="rcEnd_SelectionChanged">
</radC:RadDatePicker>
</div>
<div>
<br />
<br />
<br />
<br />
<br />
<asp:Panel ID="pnlUser" runat="server">
<asp:Label ID="lblUserName" runat="server" Text="User Name:" Width="110px"></asp:Label>
<radCB:RadComboBox ID="rcUser" runat="server" MarkFirstMatch="true">
</radCB:RadComboBox>
<asp:Label ID="lblNoUsers" runat="server" Text="No User Records in Selected Criteria"
Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlClient" runat="server">
<asp:Label ID="lblClientName" runat="server" Text="Client Name:" Width="110px"></asp:Label>
<radCB:RadComboBox ID="rcClient" runat="server" MarkFirstMatch="true">
</radCB:RadComboBox>
<asp:Label ID="lblNoClients" runat="server" Text="No Client Records in Selected Criteria"
Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlProject" runat="server">
<asp:Label ID="lblProjectName" runat="server" Text="Project Name:" Width="110px"></asp:Label>
<radCB:RadComboBox ID="rcProject" runat="server" MarkFirstMatch="true">
</radCB:RadComboBox>
<asp:Label ID="lblNoProjects" runat="server" Text="No Project Records in Selected Criteria"
Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlUserRole" runat="server">
<asp:Label ID="lblUserRole" runat="server" Text="User Role:" Width="110px" />
<radCB:RadComboBox ID="rcUserRole" runat="server" MarkFirstMatch="true" />
</asp:Panel>
</div>
</radA:RadAjaxPanel>
<radA:AjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Transparency="25" BackColor="window">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/Loading.gif" AlternateText="Loading..." />
</radA:AjaxLoadingPanel>
</div>
<div>
<br />
<asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Text="Search" />
</div>
<hr />
<div>
<asp:Label ID="lblSearchValue" runat="server"></asp:Label>
</div>
------------------------------
Here's how I tried to set up the javascript. This is in the PreRender event handler of the search control: (I figured once I got used to the setup, I could figure out how to actually invoke the btnSubmit's Submit then).
StringBuilder
js = new StringBuilder();
js.Append(
"<script type=\"text/javascript\">");
js.Append(
"\n");
js.Append(
"function HandleEnter(datePicker) {");
js.Append(
"\n\t");
js.Append(
"alert(\"here we are\");");
js.Append(
"\n\t");
js.Append(
"datePicker.AttachEventHandler(\"onkeydown\", function(eventArgs) {");
js.Append(
"\n\t\t");
js.Append(
"var key= eventArgs.keyCode;");
js.Append(
"\n\t\t");
js.Append(
"alert(\"key hit was: \" + key);");
js.Append(
"\n\t");
js.Append(
"}");
js.Append(
"\n\t");
js.Append(
");");
js.Append(
"\n\t");
js.Append(
"return false;");
js.Append(
"\n");
js.Append(
"}");
js.Append(
"\n");
js.Append(
"</script>");
this.Page.RegisterClientScriptBlock("keypress", js.ToString());
3 Answers, 1 is accepted
One possible option in this case would be to use the keypress handler for the, as shown in the code snippet below:
.aspx
| <telerik:RadDatePicker runat="server" ID="Picker1"> |
| <DateInput> |
| <ClientEvents OnKeyPress="handleKeyPress" /> |
| </DateInput> |
| </telerik:RadDatePicker> |
I hope this suggestion helps.
Greetings,
Yavor
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Trying OnValueChanged, but that's fired whether you change the date manually or use the calendar. I saw this post, but when I'm trying it I get an error that 'handleKeyPress' (what I named the value changed function) is undefined when the page loads.
Here's my new mark-up, and the javascript I generate (remember, I'm building this in my control's PreRender handler and using Page.RegisterClientScriptBlock to get it out to the page).
(I figure once I get things connected together, I can do a javascript submit on the search button if enter was hit, but that's not hooked up yet. Right now, just trying to get in connected).
Is there a syntax error I'm not seeing, or am I on another wild goose chase?
<radC:RadDatePicker ID="rcStart" runat="server" AutoPostBack="true"
OnSelectedDateChanged="rcStart_SelectionChanged">
<DateInput><ClientEvents OnValueChanged="handleKeyPress" /></DateInput>
</radC:RadDatePicker>
-------generated javascript---------
<script type="text/javascript">
var isEnter = false;
function keydown(e) {
var isIE = /MSIE/.test(navigator.userAgent);
var keyCode = isIE ? e.keyCode : e.which;
isEnter = (keyCode == 13);
}
function Focus()
isEnter = false;
}
function handleKeyPress(sender, args) {
alert("here we are, isEnter = " + isEnter);
return isEnter;
}
</script>
Since you mentioned that you are dynamically creating the control, can you revert to a static setup, to determine if this approach is not to blame for the behavior. Additionally, if the issue persists, you can open a formal support ticket, and send us a small project demonstrating the setup, for additional review.
All the best,
Yavor
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.