TabIndex

13 posts, 1 answers
  1. CS
    CS avatar
    16 posts
    Member since:
    Apr 2008

    Posted 09 Apr 2008 Link to this post

    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
  2. Answer
    Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 10 Apr 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CS
    CS avatar
    16 posts
    Member since:
    Apr 2008

    Posted 10 Apr 2008 Link to this post

    Thank you for the quick reply.  Yes, that worked.
  5. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 22 Dec 2008 Link to this post

    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?
  6. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 23 Dec 2008 Link to this post

    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.
  7. Chris Lunt
    Chris Lunt avatar
    1 posts
    Member since:
    Sep 2009

    Posted 17 Sep 2009 Link to this post

    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.
  8. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 22 Sep 2009 Link to this post

    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.
  9. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 22 Sep 2009 Link to this post

    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!
  10. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 24 Sep 2009 Link to this post

    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.
  11. Robert Blanchet
    Robert Blanchet avatar
    14 posts
    Member since:
    Sep 2005

    Posted 25 Jan 2011 Link to this post

    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
  12. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 28 Jan 2011 Link to this post

    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.
  13. Andrew
    Andrew avatar
    1 posts
    Member since:
    Jul 2012

    Posted 11 Jul 2012 Link to this post

    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.
  14. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 16 Jul 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017