RadComboBox Simple Rendering mode: TabIndex not working

9 posts, 0 answers
  1. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 03 Jul 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 04 Jul 2012 Link to this post

    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.
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 05 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 05 Jul 2012 Link to this post

    Thanks Ivan
  7. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 27 Aug 2012 Link to this post

    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"> ....


  8. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 27 Aug 2012 Link to this post

    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.
  9. srinivasskc
    srinivasskc avatar
    12 posts
    Member since:
    Sep 2012

    Posted 13 Feb 2013 Link to this post

    Is this bug fixed?

    Can u give us code - or procedure to solve it,if it is solved?
  10. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 18 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017