Using jQuery to focus on first/last

[Mathieu]

We are using jQuery to place the focus on the first or last element of the page, however we are having some issues with Telerik controls.

The jQuery which we are using is the following:

$(function() {   $("#divId :input:not(:hidden):first").focus();});

When we try to place the focus on the textbox in RadDateTimePicker, it always sets the focus on the RadDateTimePicker itself. We would have to set the focus on the 2nd element of the page to have focus in the text box.

<telerik:RadDateTimePicker ID="DatePickerOdometerUpdateDate" runat="server" CssClass="edit" Skin="Default" <br>                MinDate="1800-01-01" meta:resourcekey="DatePickerResource" TabIndex="1" ToolTip="<%$ Resources:dtpDateCounters_ToolTip %>" onkeydown="return checkIfPrev(this, event);"><br>                    <DateInput runat="server" LabelCssClass="riLabel radLabelCss_Telerik" TabIndex="1" Skin="Default" ></DateInput><br>                    <Calendar runat="server" Skin="Default" ViewSelectorText="x" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"></Calendar><br>                <DatePopupButton HoverImageUrl="" ImageUrl="" TabIndex="-1" /><br>                <TimePopupButton HoverImageUrl="" ImageUrl="" TabIndex="-1" /><br>                <TimeView CellSpacing="-1" runat="server"><br>                </TimeView><br>                </telerik:RadDateTimePicker>

When we try to place the focus a RadNumericTextBox and it is in the last position, it requires us to place the focus on the before last element.

<telerik:RadNumericTextBox ID="txtTotalHours" Skin="Default" runat="server" CssClass="edit" Width="65px" Height="13px" MaxLength="11" TabIndex="5" MinValue="-70368744177663" ToolTip="<%$ Resources:txtRunTime_ToolTip %>" onkeydown="return checkIfNext(this, event);"><br>                <NumberFormat DecimalDigits="1" /><br>            </telerik:RadNumericTextBox>

Is there an easy way to by-pass these additional text boxes and set the focus on the elements easily.

Thanks.

[Vasil]

Hello Mathieu,

RadNumericTextBox and RadDateTimePicker are rendered as composite of few input fields. One of them is visible and the rest are hidden. But they are hidden using visibility style set to hidden. And not using the display = none.

However you can check in the documentation for the :visible jQuery selector that they consider elements with visibility: hidden or opacity: 0 to be visible, since they still consume space in the layout.

So you need to define your custom selector that will select only visible elements. The code bellow is published here. It works for all inputs, RadNumericTextBox and RadDateTimePicker as well.

$.expr[":"].viewable = function (node, index, prop, nodes){
  var r = false;

  function viewable(n){
    var $n = $(n);
    return (($n.css("display") !== "none") && ($n.css("visibility") !== "hidden"));
  }

  // if not usable, stop processing
  if( !viewable(node) ) return false;

  $(node).parents().each(function (){
    r = viewable(this);
    // if not viewable, stop processing chain
    return r;
  });

  // return if the element is usable or not
  return r;
};

$(":input:text:viewable:first").focus(); //will work for also for DatePicker
$(":input:text:viewable:last").focus(); //will work for also NumericTextBox

Greetings,
Vasil
the Telerik team