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

tab to and from editor as textbox

18 Answers 301 Views

Editor

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

18 Answers, 1 is accepted

answered on 02 Mar 2010, 12:39 PM

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.

answered on 12 Mar 2010, 03:18 PM

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

answered on 22 Mar 2010, 07:37 PM

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

answered on 25 Mar 2010, 12:43 PM

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

answered on 25 Mar 2010, 10:17 PM

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.

Accepted

answered on 29 Mar 2010, 04:08 PM

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

answered on 28 Jun 2011, 06:55 PM

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>

answered on 01 Jul 2011, 03:53 PM

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.

answered on 17 Oct 2011, 02:43 PM

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

answered on 17 Oct 2011, 02:47 PM

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

answered on 18 Oct 2011, 01:24 PM

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

answered on 20 Oct 2011, 01:05 PM

RadGrid.png

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

tab to and from editor as textbox

18 Answers, 1 is accepted