TabIndex

[CS]

Hello,

When the tab key is used to navigate through the controls on a web page that contains a RadEditor, when the RadEditor is reached the toolbar buttons are activated before the editor itself.  Is there a way to have the editor activated before the toolbar buttons?

Thanks,
Craig

[Rumen]

Hello Craig,

We understand your case, so here is a workaround that will prevent editor tools from being recognized as tabstops by the browser:

<script type="text/javascript">
function OnClientLoad(editor, args) 
{ 
   var buttonsHolder = $get(editor.get_id() + "Top");  
   var buttons = buttonsHolder.getElementsByTagName("A");  
   for (var i=0; i< buttons.length; i++) 
   { 
      var a = buttons[i]; 
      a.tabIndex = -1; 
      a.tabStop = false; 
   }  
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Button" />
<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1"></telerik:radeditor>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[CS]

Thank you for the quick reply.  Yes, that worked.

[LeBear]

Hello,

I've been struggling with this, too.  However, I suspect my scenario is a little different.  I have a control on a form that inherits from the RadEditor.  For each control on the form, including the editor, I set the TabIndex.  As I tab from the prior controls to the editor, I see a dotted outline around the entire editor, showing that the editor has been tabbed to, but I'm not in the content area nor am I on the buttons.  If I tab again, I go to the next control in order.

It acts the same way if I have this script (above) in place or not.

Is there a different way to set the tab order?

[Rumen]

Hi Barry,

Please, try the solution attached here. Here it is the used code in it:

<asp:TextBox ID="TextBox1" TabIndex="1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" TabIndex="4" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" TabIndex="5" runat="server"></asp:TextBox>
<telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor1"  runat="server">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/" />
</telerik:RadEditor>
<asp:TextBox ID="TextBox2" TabIndex="2"  runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" TabIndex="6" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox6" TabIndex="7" runat="server"></asp:TextBox>
<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var buttonsHolder = $get(editor.get_id() + "Top");  //get a reference to the top toolbar zone of the editor
   var buttons = buttonsHolder.getElementsByTagName("A");  //get a reference to all A elements on the toolbar and disable the tabbing trough them
   for (var i=0; i< buttons.length; i++)
   {
      var a = buttons[i];
      a.tabIndex = -1;
      a.tabStop = false;
   }
}
Telerik.Web.UI.Editor.CommandList.InsertTab = function(commandName, editor, oTool)
{
 setTimeout(function()
 {
   
    $get(editor.get_id() + "_ModesWrapper").focus();
  }, 0); 
};
</script>

If your scenario is other, please open a support ticket and send a fully working project that demonstrates the problem and specify which behavior you expect to see. I will try to provide a solution after that.
All the best,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chris Lunt]

I am having the problem of when tabbing down a web page that contains a radeditor, when I get to the radeditor the outside of the control is highlighted, kind of like with a button.  I need to have the cursor move directly into the textbox within the editor.  If I keep tabbing through the page the last thing I tab into is the radeditor text box.  I used the scripts listed above.  The one that stops the tabbing through the buttons works, but not the one that takes you directly into the texbox so you can start typing.

I'm using file version 2008.3.1125.20 of the Telerik.Web.UI dll.

[Rumen]

Hi Chris,

In the next release of RadControls for ASP.NET AJAX we will provide a new Accessibility example in which the editor will offer the requested tabbing feature built-in. You should not use any custom code, because this functionality will be integrated in RadEditor's source code.
The release date is still not yet decided but we can expect it at the end of next week at the latest.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[LeBear]

This is truly good news.

I tried the workaround, but it didn't work.  Admittedly, I didn't do much in the way to find out what I did wrong.  I much prefer not having to do anything special to support tabbing.

Will it respect TabIndex?

Thank you!

[Rumen]

Hi Barry,

Please, test the following live example: Accessible Editor. When you go with the Tab key to the First tool on the editor's toolbar and press Enter then the focus will be set to the content area. We recommend this approach.

We also suggest to examine the rnib.js file to see how the first button works.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Paul]

Hello,

I this works quite nice to skip the tab over the buttons in the top tool bar. I was wondering is there a way to skip over the buttons on the bottom the design preview html?

Thanks
Bill

[Rumen]

Hi Robert,

You can use the following code in the OnClientLoad function to set tabStop and tabIndex attributes to the Design, HTML and Preview buttons:

var viewButtonsHolder = $get(editor.get_id() + "_ModesWrapper");
var bottomButtons = viewButtonsHolder.getElementsByTagName("A");  //get a reference to all A elements on the toolbar and disable the tabbing trough them
for (var i = 0; i < bottomButtons.length; i++) {
    var a = bottomButtons[i];
    a.tabIndex = -1;
    a.tabStop = false;
}

Kind regards,
Rumen
the Telerik team

[Andrew]

I have a bunch of rad controls on a page and want to be able to set a Tabindex on the RadEditor so that when i hit tab it goes into the editing portion of the editor.

I have tried the suggested options above and they do not seem to work.  

• I am using the latest version of telerik controls.
• I have the ContentAreaMode set to "iframe" 

If i try and give the RadEditor the property of "TabIndex" it sets the entire container to the tabindex and does not allow me to start typing into it.  I noticed that some time ago this issue was supposed to be included in the default install, but I have no idea how to trigger/activate it.

If anybody could share some insight I would greatly appreciate it.

[Rumen]

Hello,

Here is an example how to handle the TabIndex of RadEditor:

<script type="text/javascript">
function OnClientLoad(editor, args) {
    editor.removeShortCut("InsertTab");

    var buttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor
    var buttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing trough them
    for (var i = 0; i < buttons.length; i++) {
        var a = buttons[i];
        a.tabIndex = -1;
        a.tabStop = false;
    }

    var element = editor.get_element();
    editor.get_contentAreaElement().tabIndex = element.tabIndex;
    element.tabIndex = -1;
}


</script>

<asp:TextBox ID="TextBox1" TabIndex="1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox3" TabIndex="2" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox4" TabIndex="3" runat="server"></asp:TextBox>
<br />
<telerik:RadEditor OnClientLoad="OnClientLoad" ID="Rad1" TabIndex="4" runat="server"
    EditModes="Design" Height="248px" Width="971px">
    <Content>

    </Content>
</telerik:RadEditor>
<br />
<telerik:RadEditor OnClientLoad="OnClientLoad" ID="Rad2" TabIndex="5" runat="server"
    EditModes="Design" Height="238px" Width="964px">
    <Content>

    </Content>
</telerik:RadEditor>
<br />
<telerik:RadEditor OnClientLoad="OnClientLoad" ID="Rad3" TabIndex="6" runat="server"
        EditModes="Design" Height="238px" Width="964px">
</telerik:RadEditor>
<asp:TextBox ID="TextBox2" TabIndex="7" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox5" TabIndex="8" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox6" TabIndex="9" runat="server"></asp:TextBox>

All the best,
Rumen
the Telerik team