Radspell control in a Table and setting tabindex

8 posts, 0 answers
  1. Gerald
    Gerald avatar
    7 posts
    Member since:
    Aug 2010

    Posted 20 Jun 2012 Link to this post

    I have a Radspell control in a cell of a table. All is fine until I try setting tabindex on the various controls on my page.  After setting Tabindexes the cell the Radspell control is on is recieving the focus not the control itself.  What am I doing wrong?

    Thanks,
    Gerald
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 25 Jun 2012 Link to this post

    Hi,

    RadSpell is a composite control and the tabIndex attribute is applied to its DIV wrapper element but not to the input button which launches the spellchecker dialog: http://screencast.com/t/zlfgw1FNuV6. If you want to apply the tabIndex to the input button, you can do it using the following JavaScript code:

    <table>
        <tbody>
            <tr>
                <td>
                    <asp:TextBox runat="server" ID="TextBox1" TabIndex="1" />
                </td>
                <td>
                    <asp:TextBox runat="server" ID="TextBox2" TabIndex="2" />
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadSpell ID="RadSpell" TabIndex="3" ControlsToCheck="TextBox1,TextBox2"
                        OnClientLoad="OnClientLoad" runat="server" />
                    <script type="text/javascript">
                        function OnClientLoad(spell) {
                            var wrapper = spell.get_element();
                            var button = $get("RadSpell_SpellCheck");
                            var spellTabIndex = wrapper.getAttribute("tabIndex");
     
                            button.setAttribute("tabIndex", spellTabIndex);
                            wrapper.removeAttribute("tabIndex");
                        }               
                    </script>
                </td>
                <td>
                      
                </td>
            </tr>
        </tbody>
    </table>


    All the best,
    Rumen
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gerald
    Gerald avatar
    7 posts
    Member since:
    Aug 2010

    Posted 25 Jun 2012 Link to this post

    Rumen,

    Thanks for your reply. 

    I am not able to get the button.  The following is returning null.  My RadSpell ID is "RadSpell" as in your example.
    var button = $get("RadSpell_SpellCheck");

    Regards,
    Gerald
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 27 Jun 2012 Link to this post

    Hello,

    For your convenience I recorded a video http://screencast.com/t/9forq8LhdsG and attached my test project. If you still experience any troubles modify the project to demonstrates your scenario and send it via a support ticket.

    Greetings,
    Rumen
    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. Gerald
    Gerald avatar
    7 posts
    Member since:
    Aug 2010

    Posted 27 Jun 2012 Link to this post

    Rumen,

    Thanks again for your attention to this matter.  I believe my problem stems from the fact that I have a master page and the Radspell control is in a ContentPlaceHolder.  If I look at the source the id of the Spell_Check is "ctl00_MainContent_RadSpell_SpellCheck" thus the $get() is not finding the button.

    I was able to fix this by changing to the following line:
        var button = spell._spellCheckButton;

    I believe my issue is resolved. 

    Thank you,
    Gerald

  7. Dejan
    Dejan avatar
    1 posts
    Member since:
    Nov 2011

    Posted 25 Jul 2012 Link to this post

    Dear Rumen

    I've come to this thread, because I was also trying to set the tabindex on the RadSpell control and it didn't work as expected. 

    It is nice that you provide a JavaScript workaround to this problem, but I would rather have this fixed on the control itself. 

    You see, my application already has a lot of JavaScript code each time the page is loaded, and I do not want to add more code for something that can be handled on the server. (Plus, I don't want to create extra code for testing/maintenance)

    Anyways, what is the purpose of setting the tabindex attribute on the wrapper div of the RadSpell element?

    As per the W3C HTML specification, these are the only elements that support the tabindex property

    The following elements support the tabindex attribute:
    A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

    Hopefully you will reconsider and actually fix this problem

    Thanks

    Dejan
  8. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 30 Jul 2012 Link to this post

    Hello Dejan,

    Thank you for your valuable feedback.

    I do agree with you and I escalated your feature request. We will enhance the TabIndex property and it will be applied to the input type="button" element of RadSpell. Here you can find the PITS Issue: Public URL and vote for raising its priority.

    All the best,
    Rumen
    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.
  9. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 27 Aug 2012 Link to this post

    I'm linking this thread with a posting I just made about TabIndex in the ComboBox forum, but I'm having the exact same problem tabbing between RadTextBox controls and with an asp:RadioButton to a RadDatePicker.

    Should I be scripting this for the reasons documented in this thread?
    Thanks!

    EDIT: I don't know if that's the right solution, but the scripting from this thread worked for me. See linked thread.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017