Not able to set focus on RadUpload control and RadEditor Problem

11 posts, 0 answers
  1. Kapil Lavangade
    Kapil Lavangade avatar
    4 posts
    Member since:
    Aug 2009

    Posted 28 Aug 2009 Link to this post

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

    Posted 02 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chandan
    Chandan avatar
    1 posts
    Member since:
    May 2011

    Posted 05 May 2011 Link to this post

    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.
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 10 May 2011 Link to this post

    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

    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.

  6. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 30 Apr 2015 in reply to Peter Filipov Link to this post

    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

  7. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 01 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 01 May 2015 in reply to Peter Filipov Link to this post

    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

  9. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 05 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 05 May 2015 in reply to Peter Filipov Link to this post

    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.

  11. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 05 May 2015 in reply to Naman Link to this post

    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.

  12. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 07 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

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