This is a migrated thread and some comments may be shown as answers.

TabIndex

12 Answers 241 Views
Editor
This is a migrated thread and some comments may be shown as answers.
CS
Top achievements
Rank 1
CS asked on 09 Apr 2008, 07:26 PM
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

12 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 10 Apr 2008, 01:22 PM
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
0
CS
Top achievements
Rank 1
answered on 10 Apr 2008, 03:41 PM
Thank you for the quick reply.  Yes, that worked.
0
LeBear
Top achievements
Rank 1
answered on 22 Dec 2008, 11:25 PM
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?
0
Rumen
Telerik team
answered on 23 Dec 2008, 11:21 AM
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.
0
Chris Lunt
Top achievements
Rank 1
answered on 17 Sep 2009, 03:17 PM
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.
0
Rumen
Telerik team
answered on 22 Sep 2009, 01:04 PM
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.
0
LeBear
Top achievements
Rank 1
answered on 22 Sep 2009, 01:08 PM
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!
0
Rumen
Telerik team
answered on 24 Sep 2009, 12:53 PM
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.
0
Paul
Top achievements
Rank 1
answered on 25 Jan 2011, 06:18 PM
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
0
Rumen
Telerik team
answered on 28 Jan 2011, 09:58 AM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Andrew
Top achievements
Rank 1
answered on 11 Jul 2012, 06:58 PM
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.
0
Rumen
Telerik team
answered on 16 Jul 2012, 12:59 PM
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
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.
Tags
Editor
Asked by
CS
Top achievements
Rank 1
Answers by
Rumen
Telerik team
CS
Top achievements
Rank 1
LeBear
Top achievements
Rank 1
Chris Lunt
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Share this question
or