jquery $find doesn't return checkbox

[TonyG]

I'm not sure if this is related just to jQuery, or if there is an issue with the Telerik version thereof.

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

My goal is to capture the Enter key in a textbox, and depending on the textbox which has focus, move to the next appropriate control. When I move from one textbox to another, it's fine. When I want to move from a textbox to a checkbox, I can't get an object for the checkbox, the return value (ctrl) is null.  The following is in a RadCodeBlock.

function KeyPressed(ctrl, e) {
  if (e.get_domEvent().rawEvent.keyCode == 13) {
    var ID = ctrl.get_id();
    var ctrl;
    if (ID.indexOf("F1") >= 0) ctrl = $find("<%= F2.ClientID %>");
    if (ID.indexOf("F2") >= 0) ctrl = $("#<%= C1.ClientID %>"); // fail
    // $find("<%= C1.ClientID %>"); // this didn't work either
    if (ctrl !== null) {
      e.set_cancel(true);
      setTimeout(function() { ctrl.focus(); }, 1);
    }
    ...
  }
}

The F1 and F2 controls are textboxes. C1 is a checkbox (all control names simplified for this text).  The controls look like this:

<telerik:RadNumericTextBox ID="F1" Width="80px" runat="server"
  Type="Number" NumberFormat-DecimalDigits="0" ClientEvents-OnKeyPress="KeyPressed" />
...
<telerik:RadNumericTextBox ID="F2" Width="80px" runat="server"
  Type="Number" NumberFormat-DecimalDigits="0" ClientEvents-OnKeyPress="KeyPressed" />
...
<asp:CheckBox ID="C1" runat="server" Text="Check Me!" />

I'd like to understand what's wrong, but since we're here, outside of this kind of manual wiring, is there any more elegant way to set the Enter key to follow TabStops?

Thanks!

[Nikita Gourme]

This jQuery selector:
ctrl = $("#<%= C1.ClientID %>");
 
or using $get as follows:
ctrl = $get("<%= C1.ClientID %>");

should be OK in case the checkbox does not reside inside another naming container. If it does, you will need to pass the complex ClientID of the checkbox from the server to the client to resolve it properly.

$find is shortcut for findComponent and can be used for server controls with client-side objects.

Nikita

[TonyG]

Thanks Nikita!  Yup, I missed it.

ctrl = $get("<%= C1.ClientID %>");

The $get retrieves the checkbox while $find retrieves textboxes. I don't think this has to do with where the controls are because they're all at just about the same level in the DOM.  If anything, the textboxes are deeper in the hierarchy because they're RadNumericText controls, which have (from what I can tell) four associated Input tags.

If there is some good info on these topics (using $get or $find with Telerik controls) I'll be happy to read it sometime soon.  For now this issue is resolved.

Thanks again!

[Jahn Dohse]

I think I am trying to do what you describe when you say:

should be OK in case the checkbox does not reside inside another naming container. If it does, you will need to pass the complex ClientID of the checkbox from the server to the client to resolve it properly.

I basically have the below situation and am trying to get a handle on the RadTextBox, or RequiredFieldValidator on the client side.  But I can't seem to get there.

<asp:CreateUserWizardStep ID="WizardStep1" runat="server">
  <ContentTemplate>
    <telerik:RadTextBox ID="RadTextBox1" runat="server"/>
    <asp:RequiredFieldValidator runat="server" ID="Validator1"
         ControlToValidate="RadTextBox1" ValidationGroup="CreateUserWizard1" /><br />
  </ContentTemplate>
</asp:CreateUserWizardStep>

I have tried various $find("<%=....%>"), but nothing seems to work.  I am thinking that because it lives inside of the ContentTemplate, it is in another naming container.

Thanks,
Jahn

[Sebastian]

Hello Jahn,

Your assumption is correct. In this case you may consider the general approach presented in this code library thread and employ it for the case with the asp Wizard control. An alternative approach to pass the client id from the server to the client is presented for the upload instance on this example.

Best regards,
Sebastian
the Telerik team