Not able to set focus on RadUpload control and RadEditor Problem

[Kapil Lavangade]

Hello sir,
We are not able to set focus on Rad Upload control also on another page on which there is  RadEditor we are unble to set focus on any other control,whereas if we remove Rad Editor from that page then everything works fine,Please help us out,
Thanks,

[Rumen]

Hi Kapil,

What the editor actually do is similar to (but not exactly the same as) taking the focus. The editor just gets the page selection in order to properly attach its event handlers to its content area. For unknown reason (looks like an IE bug or shortfall of the implementation) keyboard handlers would not properly attach, and the editor uses additional code to get the selection.

Here is an example on how to set the focus on a textbox control for example placed at the beginning of the page:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<telerik:radeditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1"></telerik:radeditor>
<script type="text/javascript">
function OnClientLoad(editor, args)
{
    setTimeout(function()
    {
        $get("TextBox1").focus();
    }, 100);
}
</script>

You can use it in your scenario.


Best wishes,
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.

[Chandan]

Hi,

I am using a RadUpload control on a Web page, and on the PageLoad  event i want the focus to be set on the text box of the RadUpload control. I am using this method to set focus to the text box of the RadUpload control.

:- SetFocus(RadAjaxPanel, RadUpload)

But this doesn't seem to work, though i am able to set focus to any other control on the same page using the same method, but in case of RadUpload it just fails to do so. It would be great if you can provide me with a solution. Thanks.

[Peter Filipov]

Hi Chandan,

I am sending you a sample code that focus the RadUpload on page load. "Tab" keyboard support is activated too.

<form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager runat="server" ID="RadScriptManger">
        </telerik:RadScriptManager>
        <telerik:RadUpload runat="server" ID="RadUpload" ControlObjectsVisibility="All" OnClientAdded="keyboardSupport"
            EnableFileInputSkinning="true">
        </telerik:RadUpload>
        <br />
        <asp:Button Text="text" runat="server" />
    </div>
    </form>
    <script type="text/javascript">
        $ = $telerik.$;

        function keyboardSupport(sender, args) {
            var $fileInput = $(args._fileInputField);
            var $fakeInput = $fileInput.nextAll("input[class='ruFakeInput']");
            var $selectButton = $fileInput.nextAll("input[class='ruButton ruBrowse']");
            $fakeInput.attr("tabindex", "-1");
            $selectButton.attr("tabindex", "-1");

            $fileInput.focus(function (e) {
                 $selectButton.css("border", "1px dotted");
            });

            $fileInput.blur(function (e) {
                $selectButton.css("border", "0px");
            });


            if (navigator.userAgent.indexOf("MSIE") != -1) {
                $fileInput.keydown(function (e) {
                    if (e.keyCode == Sys.UI.Key.enter) {
                        e.preventDefault();
                        $fileInput.click();
                    }
                    if (e.keyCode == Sys.UI.Key.tab) {
                        $fakeInput.focus();
                    }
                });
            }
        }
        window.onload=function(){$telerik.$(".ruFileInput").focus();};

    </script>

Regards,
Peter Filipov
the Telerik team

[Naman]

Hi Peter,

My issue is related to KeyBoard accessibility with RadUpload as well. According to 508 compliance, a user should be able to TAB to the RadUpload control, and using the "Enter" key, they should be able to open the file selector dialog. But in my case, hitting "Enter" would just cause a postback.

I used your sample javascript provided here, where I would identify if the key pressed is "Enter" (key code = 13) and prevent default behaviour and trigger the click event of fileInput.

In your example, you are manipulating the state of the RadUpload control, which is basically rendered as an input control with file type. Once this is done, if you try to submit this form in IE, IE will return "Script 5: Access is Denied" error.

Looks like IE remembers that you have used javascript to alter the input tag with file type and does not allow any further form submits as part of a security implementation.

Is there any way that I can achieve a solution to my problem? Is there any way I can open the file selector dialog by tabbing to RadUpload's Browse button and hitting "Enter"?

 

Thanks,

Naman

[Peter Filipov]

Hello Naman,

The RadUpload control is deprecated and we recommend to our users the RadAsyncUpload. Please review the following demo which shows the keyboard support of the component.

Regards,
Peter Filipov
Telerik

 

 

[Naman]

Thanks for the Reply Peter.

I looked at the demo for RadAsyncUpload in IE9 and I still face the keyboard accessibility issue.

I tab to the Select button next to the Uploader and hit "Enter" and it does not open the "Choose file to Upload" window.

Any suggestions or workaround for this type of issue will be greatly appreciated.

Thanks,

Naman

[Peter Filipov]

Hello,

Please set DisablePlaugins property to true. This will force the control to use the IFrame module and the navigation should be possible.

Regards,
Peter Filipov
Telerik

 

 

[Naman]

Thanks Peter.

Navigation is possible using keyboard with that option. But if you hit the ENTER KEY on Select Button, it will not open the File Selector Window. That is what my issue is.

[Naman]

At this moment, it is not possible for my team to upgrade to RadAsyncUpload since it will be a big change for us to implement and test. As of now, I have not found any solution that has worked with RadUpload.

[Peter Filipov]

Hello Kumar,

Unfortunately the RadUpload control is deprecated and we are going to develop it. You will need to make the transition to the RadAsyncUpload if you want to use the built-in keyboard support. 
I am sending you one old implementation of the keyboard navigation in RadUpload. Keep in mind that the sample and the control are not supported and it is possible to have some glitches. 

Regards,
Peter Filipov
Telerik