tab to and from editor as textbox

19 posts, 1 answers
  1. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 01 Mar 2010 Link to this post

    I have 2 RadEditors amidst several textbox controls on a user control.
    I can not tab to and from the text area inside each RadEditor Control. The tabindex is set.
    It looks like it is tabbing to the control only and not the text inside.  I understand that the text area inside the control is an IFrame.
    Is there a way to have textbox style tabbing with the RadEditors as a textbox?
    Thanks
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 02 Mar 2010 Link to this post

    Hi Rick,

    Here is an example on how to proceed in your scenario:

    <telerik:RadTextBox ID="TextBox1" runat="server"></telerik:RadTextBox>
    <telerik:RadTextBox ID="TextBox2" runat="server"></telerik:RadTextBox>
    <telerik:RadTextBox ID="TextBox3" runat="server"></telerik:RadTextBox>
    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
       <ImageManager ViewPaths="~/Images/" UploadPaths="~/Images/Fiko" />
    </telerik: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;  
            }  
     
    }
    </script>

    You can also see the code of this demo: Accessible Editor.


    Best wishes,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 04 Mar 2010 Link to this post

    Thanks for the example, but...
    This does not solve my problem.  I'll try to be more clear.

    When tabbing through the text objects on the user control.  The RadEditor can be tabbed to and from, however the text content area of the RadEditor never gets focus. The control box gets focus.
    How do I set focus on the text content, just like a textbox when it gets focus?

    Thanks
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 05 Mar 2010 Link to this post

    Hello Rick,

    It will be best if you isolate the reported behavior in a sample working project and send it for examination by opening a support ticket. After reproducing the issue, I will provide a solution.

    Greetings,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 09 Mar 2010 Link to this post

    I have created a sample Web App with a sample database showing how I can not tab to the text in a RadEditor.
    My sample uses Master pages.  It uses User Controls for Editting.

    You can download my test sample in a zip from from my Web Site below. About 6 Meg.

    http://www.hubka.com/editortabbing.aspx

    Thanks

    Rick Hubka
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 12 Mar 2010 Link to this post

    Hi Rick,

    I examined the provided project, but I was unable to see any instance of RadEditor in the code. I also notice that the provided code in my earlier message is missing too.

    Could you please simplify the example, add a page with RadEditor and send it for examination? Please, provide steps to reproduce the problem and make the project easy for deployment and test.

    Best regards,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 22 Mar 2010 Link to this post

    Hi Rumen

    An instance of RadEditor is in the code.  It is in WebUserControl.ascx.
    Remember my problem is getting tabbing to work in a User Control.
    I tried to reproduce the code in this example the way I use it in my application.

    Add the Telerik dlls to the bin folder (2009 Q3)
    Open my sample app in VS 2008
    Make Default2.aspx the start page.
    Run the app.
    A Rad Grid will appear.
    Click the edit pencil on the first row (ID 2)
    Now the Edit User Control is visible.  This is where my problem is.
    The first text box does not have focus even though it has a tab index of 1
    Then when you tab to the second control(RadEditor as a text box) the text does not get selected.

    I hope I have been clear enough.

    Hoping you can help
  9. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 25 Mar 2010 Link to this post

    Hi Rick,

    I examined the provide archive once again but I was unable to find a file named WebUserControl.ascx. There is a fine named userControl.ascx but it includes only RadGrid and RadCombobox in it.

    I would like to note once again that I need a fully working project that I will be able deploy, run and test without additional configuration and modification.

    I just add two important notes to this thread:

    1) the TabIndex property of RadEditor applies a tabIndex attribute to RadEditor wrapping DIV element, but not to the IFRAME (the content area of the control). So when you tab through the controls on the page the selection goes through the wrapper DIV but not through the content area.

    2) What the editor actually does is similar to (but not exactly the same as) getting the focus. The editor just gets the page selection when the page loads in order to attach its event handlers properly. That is why you should set the focus to the first textbox after the editor's load using the OnClientLoad event. You can attach it on the server like this:

    RadEditor1.OnClientLoad = "OnClientLoad"; // the OnClientLoad string is the name of a client side function

    Here is the JavaScript function that will set the focus on the  textbox on editor load:

    <script type="text/javascript">
    function OnClientLoad()
    {
       setTimeout(function()
       {
          $get("textbox1").focus(); //set the focus to the textbox with id textbox1
       }, 300);
    }
    </script>

    3) The problem in your usercontrol based solution could be that the script is not executed or there is a JavaScript error.


    Best wishes,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  10. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 25 Mar 2010 Link to this post

    Hi Rumen

    I am so sorry.  The file I made available for download was the wrong file!  I am so sorry!!!!!!!!!!!!!!

    Here is the link again with the correct solution files.  I double checked.  Click here

    Add the Telerik dlls to the bin folder (2010 Q1)
    Open my sample app in VS 2008
    Run the app.
    A Rad Grid will appear.
    Click the edit pencil on the first row (ID 2)
    Now the Edit User Control is visible.  This is where my problem is.
    The first text box does not have focus even though it has a tab index of 1
    Then when you tab to the second control(RadEditor as a text box) the text does not get selected.

    Again I am so sorry to have wasted your time on the wrong files.

    Thanks again for helping.
  11. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 29 Mar 2010 Link to this post

    Hi Rick,

    Thank you for the provided project :) This time I was able to reproduce the problem and was able to fix it with this modification in the OnClientLoad function 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;
                    
                    // set focus to the first textbox, now that the editor has loaded
                    setTimeout(function() {
                        editor.get_contentAreaElement().tabIndex = "2";
                        //$get("ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl11$EditFormControl$TextBox7").focus(); //set the focus to the textbox with id textbox7
                    }, 300);
                }
            }
        </script>

    The get_contentAreaElement() method returns a reference to the IFRAME content area element of RadEditor.

    Best wishes,
    Rumen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  12. Rick Hubka
    Rick Hubka avatar
    33 posts
    Member since:
    Apr 2006

    Posted 29 Mar 2010 Link to this post

    Hi Rumen

    Thanks for hanging in there and putting up with me,
    You code change to the function worked perfectly!!!
  13. Graham MacLeod
    Graham MacLeod avatar
    7 posts
    Member since:
    Oct 2009

    Posted 28 Jun 2011 Link to this post

    I'm not sure I'm using the exact save version of Rad Controls but I've been having the exact same problem.  I have a web user control  called from a RadGrid as my custom edit form.  The code above correctly sets the focus to the 1st textbox, however the behavior when tabbing out of this textbox is broken.  Before, it would tab directly into the RadEditor control, even though that is defined in a separate table element.  Now, with these customizations, when I tab out of the textbox, my browser gives a "javascript: void(0)" error.  Any thoughts on what I should change to get around this problem?

    Here is the definition of the RadEditor:

     

     

    <telerik:RadEditor ID="redNotes" runat="server" Skin="WebBlue" Height="190px" OnClientLoad="OnClientLoad_RadEditor"

     

     

    Content='<%# DataBinder.Eval( Container, "DataItem.opit_notes" ) %>' >

     

     

        <Tools>

     

     

            <telerik:EditorToolGroup>

     

     

                <telerik:EditorTool name="AjaxSpellCheck" shortcut="F7"/>

     

     

                <telerik:EditorTool name="Cut" shortcut="CTRL+X"/>

     

     

                <telerik:EditorTool name="Copy" shortcut="CTRL+C"/>

     

     

                <telerik:EditorTool name="Paste" shortcut="CTRL+V"/>

     

     

                <telerik:EditorTool name="PasteFromWord" />

     

     

                <telerik:EditorTool name="Indent" />

     

     

                <telerik:EditorTool name="Outdent" />

     

     

                <telerik:EditorTool name="InsertUnorderedList" />

     

     

                <telerik:EditorTool name="InsertOrderedList" />

     

     

                <telerik:EditorTool name="FontName"/>

     

     

                <telerik:EditorTool name="FontSize"/>

     

     

            </telerik:EditorToolGroup>

     

     

        </Tools>

     

     

     

        <Content></Content>

     

     

    </telerik:RadEditor>

    Here is the OnClientLoad script:
     

     

    function OnClientLoad_RadEditor(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"); 
        for (var i = 0; i < buttons.length; i++) 
        {
            var a = buttons[i];
            a.tabIndex = -1;
            a.tabStop = false;
        }
        // set focus to the first textbox, now that the editor has loaded
        var t = setTimeout(function() {
            editor.get_contentAreaElement().tabIndex = "10";
            var obj = $get("<%= txtOwnerItem.ClientID %>");
            obj.focus(); //set the focus to the textbox with id textbox7
        }, 300);
    }

    Again, I get no errors on this page, however when tabbbing out of the txtOwnerItem control, IE 8 status message is "javascript: void(0)".

    - Graham

    PS: I tried attaching my ASCX file as a ZIP but the 'Attach your files' dialogue kept telling me the file was not of the correct type, so here's the file:



    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OppItemEditForm.ascx.cs" Inherits="USI_OppItemEditForm.OppItemEditForm" %>
    <%--<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>--%>
      
    <telerik:RadScriptBlock  ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        // if (window.attachEvent)
        // {
        //     window.attachEvent("onload", ClearAnchors);
        // }
        function UpdateExtPrice(sender, eventArgs)
        {
            var oQty = $find("<%= rntQty.ClientID %>");
            var oPrice = $find("<%= rntPrice.ClientID %>");
            // if ((oQty.get_value() >= 0) && (oPrice.get_value() >= 0))    // values could be 0 or negative
            // {
               var oExtPrice = $find("<%= rntExtPrice.ClientID %>");
               oExtPrice.set_value(oQty.get_value()* oPrice.get_value());
            // }
            // alert("In function");
        }
          
        function OnClientLoad_RadEditor(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;
            }
            // set focus to the first textbox, now that the editor has loaded
            var t = setTimeout(function() {
                editor.get_contentAreaElement().tabIndex = "10";
                var obj = $get("<%= txtOwnerItem.ClientID %>");
                obj.focus(); //set the focus to the textbox with id textbox7
                }, 300); 
        }
          
    </script>
    </telerik:RadScriptBlock>
    <table id="TopTable" >
        <tr><td>
        <table id="tbl01" cellspacing="1" cellpadding="1" width="100%" border="0">
            <tr>
                <td><b>Owner Item #:</b></td>
                <td>
                    <asp:TextBox id="txtOwnerItem" runat="server" ReadOnly="false" TabIndex="0"
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_program" ) %>' >
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Qty:</b></td>
                <td>
                    <telerik:RadNumericTextBox  ID="rntQty" runat="server"   NumberFormat-DecimalDigits="0"
                        Value='<%# ConvertInt( DataBinder.Eval( Container, "DataItem.opit_quantity" ) ) %>' TabIndex="1">
                        <ClientEvents OnValueChanged="UpdateExtPrice" />            
                        <NumberFormat DecimalDigits="0" />
                    </telerik:RadNumericTextBox>
                </td>
            </tr>
            <tr>
                <td><b>Unit:</b></td>
                <td>
                    <asp:TextBox id="txtUOM" runat="server" ReadOnly="false"
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_unit" ) %>' TabIndex="2"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Price:</b></td>
                <td>
                    <telerik:RadNumericTextBox  ID="rntPrice" runat="server"  NumberFormat-DecimalDigits="3"
                    Value='<%# ConvertDouble( DataBinder.Eval( Container, "DataItem.opit_quotedprice" ) ) %>' Type="Currency" TabIndex="3">
                        <ClientEvents OnValueChanged="UpdateExtPrice" />            
                        <NumberFormat DecimalDigits="3" />
                    </telerik:RadNumericTextBox>
                </td>
            </tr>
        </table>
        </td>
          
        <td
        <table id="tbl02" cellspacing="1" cellpadding="1" width="100%" border="0">
            <tr>
                <td><b>Name:</b></td>
                <td>
                    <asp:TextBox id="txtProdName" runat="server" TabIndex="-1" 
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_productname" ) %>' OnDataBinding="txtProdName_DataBinding"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Cost Code:</b></td>
                <td>
                    <asp:TextBox id="txtCostCode" runat="server" ReadOnly="false"
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_costcode" ) %>' TabIndex="4"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Material:</b></td>
                <td>
                    <asp:TextBox id="txtMaterial" runat="server" ReadOnly="false"
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_material" ) %>' TabIndex="5"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Ext Price:</b></td>
                <td>
                    <telerik:RadNumericTextBox  ID="rntExtPrice" runat="server" ReadOnly="true" NumberFormat-DecimalDigits="3" BorderStyle="Solid" BorderColor="Black" TabIndex="-1"
                    Value='<%# ConvertDouble( DataBinder.Eval( Container, "DataItem.opit_quotedpricetotal" ) ) %>' Type="Currency" BackColor="LightGray"> 
                    </telerik:RadNumericTextBox>
                </td>
            </tr>
        </table>    
        </td>
      
        <td>  
        <table id="tbl03" cellspacing="1" cellpadding="1" width="100%" border="0">
            <tr>
                <td><b>Timberline Name:</b></td>
                <td>
                    <asp:TextBox id="txtTimberlineName" runat="server" ReadOnly="false"
                    Text='<%# DataBinder.Eval( Container, "DataItem.opit_productnamebo" ) %>' TabIndex="6"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Family:</b></td>
                <td>
                    <asp:TextBox id="txtFamily" runat="server" ReadOnly="true" TabIndex="-1"
                    Text='<%# DataBinder.Eval( Container, "DataItem.prfa_name" ) %>' BackColor="LightGray">
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td><b>Group:</b></td>
                <td>
                    <asp:TextBox id="txtGroup" runat="server" ReadOnly="true" TabIndex="-1"
                    Text='<%# DataBinder.Eval( Container, "DataItem.prod_group" ) %>' BackColor="LightGray">
                    </asp:TextBox>
                </td>
            </tr>
            <tr><td>  </td></tr>
        </table>
        </td>
          
        <td>
         <table id="tbl04" cellspacing="1" cellpadding="1" width="100%" border="0">
            <tr>
                <td><b>Type:</b></td>
                <td>
                    <telerik:RadComboBox ID="rcbType" runat="server"  TabIndex="7"
                     DataSourceID="sdsType"  DataTextField="opit_type" DataValueField="opit_type_code" 
                     SelectedValue='<%# DataBinder.Eval( Container, "DataItem.opit_type_code" ) %>' >
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td><b>Status:</b></td>
                <td>
                    <telerik:RadComboBox ID="rcbStatus" runat="server" 
                     DataSourceID="sdsStatus"  DataTextField="opit_status" DataValueField="opit_status_code" 
                     SelectedValue='<%# DataBinder.Eval( Container, "DataItem.opit_status_code" ) %>' TabIndex="8" 
                     OnDataBound="rcbStatus_DataBound" >
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td><b><asp:label runat="server" ID="lblCompetitor" Text="Competitor:" Visible='<%# (DataBinder.Eval( Container, "DataItem.opit_type_code" ) == "Competitor") ? true : false %>'></asp:label></b></td>
                <td>
                    <telerik:RadComboBox ID="rcbCompetitor" runat="server" 
                    SelectedValue='<%# DataBinder.Eval( Container, "DataItem.comp_companyid" ) %>'
                     DataSourceID="sdsCompetitor"  DataTextField="comp_name" DataValueField="comp_companyid" 
                     OnDataBound="rcbCompetitor_DataBound" TabIndex="9" Visible='<%# (DataBinder.Eval( Container, "DataItem.opit_type_code" ) == "Competitor") ? true : false %>'>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr><td>
                <asp:ImageButton ID="ibSave" runat="server" CommandName="Update" ImageUrl="ok.gif" TabIndex="11" />
                     
                <asp:ImageButton ID="ibCancel" runat="server" CommandName="Cancel" ImageUrl="cancel_1.gif" TabIndex="12" />
            </td></tr>
        </table>
        </td></tr>
    </table>
      
    <table id="tblBottom"  cellspacing="1" cellpadding="1" width="100%" border="0">
        <tr>
            <td>
                <telerik:RadEditor ID="redNotes" runat="server" Skin="WebBlue" Height="190px" OnClientLoad="OnClientLoad_RadEditor" 
                    Content='<%# DataBinder.Eval( Container, "DataItem.opit_notes" ) %>' >
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool name="AjaxSpellCheck" shortcut="F7"/>
                            <telerik:EditorTool name="Cut" shortcut="CTRL+X"/>
                            <telerik:EditorTool name="Copy" shortcut="CTRL+C"/>
                            <telerik:EditorTool name="Paste" shortcut="CTRL+V"/>
                            <telerik:EditorTool name="PasteFromWord" />
      
                            <telerik:EditorTool name="Indent" />
                            <telerik:EditorTool name="Outdent" />
                            <telerik:EditorTool name="InsertUnorderedList" />
                            <telerik:EditorTool name="InsertOrderedList" />
      
                            <telerik:EditorTool name="FontName"/>
                            <telerik:EditorTool name="FontSize"/>
                        </telerik:EditorToolGroup>
                    </Tools>
                    <Content></Content>
                </telerik:RadEditor>
            </td>
        </tr>            
    </table>
    <asp:Label ID="lblId" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.opit_opportunityitemid" ) %>'></asp:Label>
    <asp:SqlDataSource ID="sdsCompetitor" runat="server" ConnectionString="Data Source=SI-DC;Initial Catalog=CRM;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="select comp_companyid, RTrim(Comp_name) as Comp_name from company where comp_deleted is null and comp_competitor = 'Y' order by comp_name"></asp:SqlDataSource>
    <asp:SqlDataSource ID="sdsStatus" runat="server" ConnectionString="Data Source=SI-DC;Initial Catalog=CRM;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="select RTrim(capt_code) as opit_status_code, RTrim(cast(capt_us as nvarchar(64))) as opit_status from Custom_Captions where Capt_Family = 'opit_status' and capt_deleted is null order by capt_order"></asp:SqlDataSource>
    <asp:SqlDataSource ID="sdsType" runat="server" ConnectionString="Data Source=SI-DC;Initial Catalog=CRM;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="select RTrim(capt_code) as opit_type_code, RTrim(cast(capt_us as nvarchar(64))) as opit_type from Custom_Captions where Capt_Family = 'opit_type' and capt_deleted is null order by capt_order"></asp:SqlDataSource>


     

  14. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 Jul 2011 Link to this post

    Hi Graham,

    Actually, no error is thrown after tabbing out from the first textbox, but the focus is set to the editor's DesignMode button which is an <a> element with href="javascript:void(0)" and the browser's status displays this value.

    The problem comes from the fact that the textbox that is initially selected has TabIndex="0" which is incorrect value and the Tab Index order becomes invalid. I was able to fix the issue by changing the TabIndexes to all elements starting with TabIndex="1".

    Greetings,
    Dobromir
    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.

  15. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 17 Oct 2011 Link to this post

    Hi,

    Your code is working fine,
    But there is a small problem. By clicking the Tab key, the cursor will move to the RadEditor design view (where the user types his data), and if he click the Tab key again in order to move to the next control (All controls are assigned with a spesific TabIndex) then the cursor will select the radedtor itself and will not move to the next control . If the user click twise on the Tab key then the cursor will move to the next control.

    Please, I need your help to move to the next control in the form by clicking once (not twise) on the Tab key.

    Regards,
    Bader
  16. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 17 Oct 2011 Link to this post

    Hi Bader,
    I am unable to reproduce this behavior in IE9 and Firefox 7 with the following code:


    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
       <telerik:RadEditor OnClientLoad="OnClientLoad"  ID="RadEditor1" runat="server" />
     <script type="text/javascript">
         function OnClientLoad(editor) {
             editor.removeShortCut("InsertTab");
         }
     </script>
    <asp:TextBox ID="Textbox2" runat="server" />



    Regards,
    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
  17. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 17 Oct 2011 Link to this post

    Hi Bader,

    Here is an updated version of the code for tab indexes:
    <asp:TextBox ID="Textbox1" TabIndex="1" runat="server" />
    <telerik:RadEditor OnClientLoad="OnClientLoad" EditModes="Design" ID="RadEditor1" runat="server" />
    <script type="text/javascript">
        function OnClientLoad(editor) {
            editor.removeShortCut("InsertTab");
            var iframe = editor.get_contentAreaElement();
            //set the tabIndex attribute to the iframe     
            iframe.setAttribute("tabIndex", "2");
     
            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;
            }
     
        }
    </script>
    <asp:TextBox ID="Textbox2" TabIndex="3" runat="server" />


    Regards,
    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
  18. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 17 Oct 2011 Link to this post

    Hi,

    Thank you very much, it solves the problem.
    Since the radeditor control is placed within a user control which is called from different pages, and the radeditor control must have different tabindex, I'm facing a problem.
    Your code gives a value of "2" for the tabindex which is overwrite the passed tabindex value, and that causes some problems while trying to pass between the form fileds in the different pages.

    Can you please help me to solve the above problem,

    Regards,
    Bader
  19. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 18 Oct 2011 Link to this post

    Hello Bader,

    Using the code below, you can still set the TabIndex property of RadEditor and it will be applied not to the wrapper of the element as it is by design but to its iframe:
    <asp:TextBox ID="Textbox1" TabIndex="1" runat="server" />
    <telerik:RadEditor OnClientLoad="OnClientLoad" EditModes="Design" TabIndex="2" ID="RadEditor1" runat="server" />
    <script type="text/javascript">
        function OnClientLoad(editor) {
            editor.removeShortCut("InsertTab");
            var iframe = editor.get_contentAreaElement();
            //set the tabIndex attribute to the iframe    
            iframe.setAttribute("tabIndex", editor.get_element().getAttribute("TabIndex"));
            editor.get_element().removeAttribute("tabIndex");
            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;
            }
     
        }
    </script>
    <asp:TextBox ID="Textbox2" TabIndex="3" runat="server" />

    The new code is highlighted.


    Kind regards,
    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
  20. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 20 Oct 2011 Link to this post

    Hi,

    I have a problem with the tabindex property.
    Attached a screen-shot of a sample form which is based on the demo http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/usercontroleditform/defaultcs.aspx (But with addional field that are not related to the RadGrid control and colored in Green).
    I need set the tabindex attribute for all fields in the user control (Colored in Red), so clicking on the tab key in the keyboard won't move the cursor out of the user control.

    By the way all fields out of the RadGrid control has thier own tabindex property, so I want to create a two tabindex groups:
    1) Fields out of the RadGrid control.
    2) Fields inside the user control edit form.

    It is possible?
    Please, I need your help in order to solve the a bove problem.

    Regards,
    Bader
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017