tab to and from editor as textbox

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

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.

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?

Rumen

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.

Rumen

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.

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.

Rumen

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:

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.

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.

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.

Graham MacLeod

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?

<asp:SqlDataSourceID="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:SqlDataSourceID="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:SqlDataSourceID="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>

Dobromir

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".

Bader

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.

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

varbuttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor

varbuttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing trough them

for(vari = 0; i < buttons.length; i++) {

vara = 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

Bader

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.

varbuttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor

varbuttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing trough them

for(vari = 0; i < buttons.length; i++) {

vara = 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

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.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.