RadComboBox Simple Rendering mode: TabIndex not working

[Fergal]

I have the following control (as well as others) on my page

<telerik:RadComboBox ID="ddlItemType" runat="server" ToolTip="Item Type" Width="157px"
            TabIndex="50" />

This works fine, but if I set the control the Simple Rendering mode:

<telerik:RadComboBox ID="ddlItemType" runat="server" ToolTip="Item Type" Width="157px" RenderingMode="Simple"
            TabIndex="50" />

The control does not tab correctly. When the focus is on the previous control, and I tab, it moves past this control, and onto the control with TabIndex 60.

Is there another property I need to apply for TabIndexes in Simple mode? I've checked the markup that is rendered onto the page, and the TabIndex is not being set at all.

[Princy]

Hi Fergal,

Try setting the TabIndex on pageLoad as follows.

JS:

<script type="text/javascript">
  function pageLoad()
  {
    var combo = $find("<%=ddlItemType.ClientID %>");
    combo._element.tabIndex = 50;
  }
</script>

Hope this helps.

Thanks,
Princy.

[Fergal]

That doesnt seem to work. Although it focuses on the control, it must be focusing on the div surrounding it, rather than the select itself, as you cannot manually type into the box.

The whole issue with this, is that the RadComboBox in normal mode wont let you type to select the item (i.e. If I select the control and type "Item", it will select the first option beginning with I, then the first option beginning with T, and so on. Switching to simple mode gets me around this and returns the normal functionality.

The key point to note, is that I want to be able to use standard asp dropdown lists interchangeably with Telerik, in order to reduce overhead. So I can't use the clever auto-complete or filtering options that telerik provide.

[Ivan Zhekov]

Hi, Fergal.

That appears to be a bug with the combobox. I have logged it and will fix it.

Kind regards,
Ivan Zhekov
the Telerik team

[Fergal]

Thanks Ivan

[TonyG]

I'm working with v2012.2.815.40 and seeing similar issues. Is this a general problem?
In the code below:
txtDriver does Not tab to txtPsw!
txtPsw Does tab to btnTrucker
btnTrucker Does tab to rdoAM
rdoAM Does tab to rdoPM
rdoPM tabs to btnTrucker, not to datePicker!
Note, no combo boxes in this page.
Thanks.

PS: Should I be scripting my TabIndex based on info in this other related thread?
EDIT1: It looks like Firefox gets most of the tab indexing right. IE9 does not.

<table style="width: 687px">
  <tr>
     <td colspan="4">
      Driver
      <telerik:RadTextBox ID="txtDriver" runat="server"
        EmptyMessage="Enter Driver#" LabelWidth="10px"
        Width="160px" TabIndex="0">
      </telerik:RadTextBox>
      <telerik:RadTextBox ID="txtPsw" runat="server"
         EmptyMessage="" LabelWidth="10px"
         Width="160px" TabIndex="1" TextMode="Password">
      </telerik:RadTextBox>
      <telerik:RadButton ID="btnTrucker" runat="server"
          Text="Go" OnClick="btnTrucker_Click" TabIndex="2" />
      <asp:Label ID="lblDriverName" runat="server"></asp:Label>
  </td>
</tr>
<tr>
  <td> </td>
  <td>
    <asp:RadioButton ID="rdoAM" runat="server" Text="Dayside"
       AutoPostBack="True" OnCheckedChanged="rdoAM_CheckedChanged"
       TabIndex="3" />
     <asp:RadioButton ID="rdoPM" runat="server" Text="Nightside"
       AutoPostBack="True" OnCheckedChanged="rdoPM_CheckedChanged"
       TabIndex="4" />
  </td>
  <td>
      <em><asp:Label ID="lblAMPM" runat="server">Please select a value</asp:Label></em>
  </td>
  <td> </td>
</tr>
<tr>
  <td>Date</td>
  <td>
    <telerik:RadDatePicker ID="datePicker" runat="server"
        AutoPostBack="True" Culture="en-US" TabIndex="5"> ....

[TonyG]

At the risk of replying to myself, I took a hint from that other thread that I linked to and used a combination of scripting and code-behind.

function Loaded(ctl) {
    var wrapper = ctl.get_element();
    var sub;
    if (wrapper.name == "txtDriver") {
        sub = wrapper.control._textBoxElement;
        ctl.focus();
    }
    if (wrapper.name == "txtPsw")
        sub = wrapper.control._textBoxElement;
    if (wrapper.name == "datePicker")
        sub = wrapper.control._calendarElement;
    if (wrapper.id == "btnTrucker" || wrapper.id == "btnPreview" || wrapper.id == "btnSubmit")
        sub = wrapper.control._textElement;
    if (!sub)
        return;
    var ti = wrapper.getAttribute("tabIndex");
    sub.setAttribute("tabIndex", ti);
    wrapper.removeAttribute("tabIndex")
}

The idea is to set the element wrapped within the RadControl with the value of the TabIndex from the parent RadControl. Note the different element type being extracted from each control.
The controls identified above call the script with this tag:

<ClientEvents OnLoad="Loaded" />

The first control in the page is the txtDriver, so that gets focus.

The radio buttons don't get a TabIndex. I Googled around and people have been asking about that for years. Since the goal is to activate the first radio button when the user hits the first button (btnTrucker), I'm using the code-behind event to execute rdoAM.Focus(). So this explicitly goes where I want at the right time rather than implicitly being set with an attribute.

I don't know if this is the right solution, but hey, it's working for me now in both FF and IE.

Feedback is welcome. I hope that helps someone.

[srinivasskc]

Is this bug fixed?

Can u give us code - or procedure to solve it,if it is solved?

[Nencho]

Hi Srinivasskc,

The bug is not yet fixed. Once we managed to release the fix, I will updated this thread.

Regards,
Nencho
the Telerik team