Radspell control in a Table and setting tabindex

[Gerald]

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

[Rumen]

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

[Gerald]

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

[Rumen]

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

[Gerald]

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

[Dejan]

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

[Rumen]

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

[TonyG]

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.