RadAsyncUpload KeyBoard Support Not Working

4 posts, 0 answers
  1. Abhinav
    Abhinav avatar
    7 posts
    Member since:
    Aug 2012

    Posted 18 Jan 2013 Link to this post

    Hi,

    I am using Telerik RadAsyncUpload and trying to get the keyboard control using the demo URL. I am using 2011.2.915.40 version.

    http://demos.telerik.com/aspnet-ajax/asyncupload/examples/keyboardsupport/defaultcs.aspx

    I am using the same code given in the demo URL, but unable to get the focus on Select button on Tab key. Please suggest me what I am missing in the attached code.

    Thanks!
    Abhinav
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileAttachmentTest.aspx.cs" Inherits="FileAttachmentTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <div>
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="keyboardSupport"
                AccessKey="P" OnClientFileUploading="onClientFileUploading" DisablePlugins="true">
            </telerik:RadAsyncUpload>
        </div>
     
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                debugger
                var $ = $telerik.$;
                var $cancelButton;
     
                // keyboardSupport() method activates focusing with TAB key
                function keyboardSupport(sender, args) {
                    var $fileInput = $(".ruFileInput", args.get_row());
                    $fileInput.attr("tabindex", "1")
     
                    var $selectButton = $(".ruButton.ruBrowse", args.get_row());
     
                    $fileInput.focus(function (e) {
                        $selectButton.css("border", "1px dotted");
                    });
     
                    $fileInput.blur(function (e) {
                        $selectButton.css("border", "0px");
                    });
     
                    if ($telerik.isIE) {
                        $fileInput.keydown(function (e) {
                            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == false) {
                                $fileInput.parent().focus();
                            }
                            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == true) {
                                e.preventDefault();
                                if ($cancelButton != undefined)
                                    $cancelButton.focus();
                                else
                                    $fileInput.parent().focus();
                            }
                        });
                    }
                }
     
                function onClientFileUploading(sender, args) {
                    $(".ruFileInput", args.get_row()).attr("tabindex", "-1");
     
                    $cancelButton = $(".ruCancel", args.get_row());
                    $cancelButton.attr("tabindex", "1");
                }
     
                $(document).keydown(function (e) {
                    var accesskey = $find("<%=RadAsyncUpload1.ClientID%>")._accessKey;
     
                    if ($telerik.isFirefox) {
                        if (e.altKey == true && e.shiftKey == true && e.which == accesskey.charCodeAt()) {
                            focusOnFirstInput();
                        }
                    }
     
                    if ($telerik.isChrome || $telerik.isSafari || $telerik.isIE) {
                        if (e.altKey == true && e.which == accesskey.charCodeAt()) {
                            focusOnFirstInput();
                        }
                    }
                });
     
                function focusOnFirstInput() {
                    var firstInput = $("input[type='file']", $get("<%=RadAsyncUpload1.ClientID%>"))[0];
                    if (firstInput != undefined) {
                        firstInput.focus();
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class FileAttachmentTest : ETOPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
    }
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 18 Jan 2013 Link to this post

    Hi   .

    I'm not sure that this code will run if it is just copy-&-pasted into your file. If you want to lean how to isolate the demo source code, just click on 'Demo Isolation Steps'. The only thing I noticed was that you didn't copy over the DefaultCS.aspx.cs file. This could be throwing the error. 
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
     
    namespace Telerik.Web.Examples.Upload.IntegratedValidation
    {
        public partial class DefaultCS : System.Web.UI.Page
        {
            protected void RadTextBox1_TextChanged(object sender, EventArgs e)
            {
                RadAsyncUpload1.AccessKey = RadMaskedTextBox1.Text;
     
            }
     
        }
    }


    Hope I could be of help,
    Master Chief
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Abhinav
    Abhinav avatar
    7 posts
    Member since:
    Aug 2012

    Posted 21 Jan 2013 Link to this post

    Hi,

    Thanks for your reply. I have done changes as per the demo isolation steps and removed instances of qsf. Still I am unable to access the Select button with Keyboard on tab key press. Please find my final code and let me know if I am missing anything else.

    Thanks!
    Abhinav

    FileAttachmentTest.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileAttachmentTest.aspx.cs" Inherits="FileAttachmentTest" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
         
        <div>
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="keyboardSupport"
                AccessKey="P" OnClientFileUploading="onClientFileUploading" DisablePlugins="true">
            </telerik:RadAsyncUpload>
        </div>
     
        <div>
            <label>Focus key:</label>
            <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Width="40" Mask="L"
                Text="P" AutoPostBack="true" OnTextChanged="RadTextBox1_TextChanged" SelectionOnFocus="SelectAll" />
        </div>
         
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                debugger
                var $ = $telerik.$;
                var $cancelButton;
     
                // keyboardSupport() method activates focusing with TAB key
                function keyboardSupport(sender, args) {
                    var $fileInput = $(".ruFileInput", args.get_row());
                    $fileInput.attr("tabindex", "1")
                    var $selectButton = $(".ruButton.ruBrowse", args.get_row());
                    $fileInput.focus(function (e) {
                        $selectButton.css("border", "1px dotted");
                    });
                    $fileInput.blur(function (e) {
                        $selectButton.css("border", "0px");
                    });
                    if ($telerik.isIE) {
                        $fileInput.keydown(function (e) {
                            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == false) {
                                $fileInput.parent().focus();
                            }
                            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == true) {
                                e.preventDefault();
                                if ($cancelButton != undefined)
                                    $cancelButton.focus();
                                else
                                    $fileInput.parent().focus();
                            }
                        });
                    }
                }
     
                function onClientFileUploading(sender, args) {
                    $(".ruFileInput", args.get_row()).attr("tabindex", "-1");
                    $cancelButton = $(".ruCancel", args.get_row());
                    $cancelButton.attr("tabindex", "1");
                }
     
                $(document).keydown(function (e) {
                    var accesskey = $find("<%=RadAsyncUpload1.ClientID%>")._accessKey;
                    if ($telerik.isFirefox) {
                        if (e.altKey == true && e.shiftKey == true && e.which == accesskey.charCodeAt()) {
                            focusOnFirstInput();
                        }
                    }
                    if ($telerik.isChrome || $telerik.isSafari || $telerik.isIE) {
                        if (e.altKey == true && e.which == accesskey.charCodeAt()) {
                            focusOnFirstInput();
                        }
                    }
                });
     
                function focusOnFirstInput() {
                    var firstInput = $("input[type='file']", $get("<%=RadAsyncUpload1.ClientID%>"))[0];
                    if (firstInput != undefined) {
                        firstInput.focus();
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

    FileAttachmentTest.aspx.cs
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
     
    public partial class FileAttachmentTest : System.Web.UI.Page
    {
        protected void RadTextBox1_TextChanged(object sender, EventArgs e)
        {
            RadAsyncUpload1.AccessKey = RadMaskedTextBox1.Text;
        }
    }
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 22 Jan 2013 Link to this post

    Hi,

     
    It seems that the keyboard functionality in it was implemented in after the version you are using so I will recommend you to upgrade with a newer version of RadControls.

    Kind regards,
    Plamen
    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.
Back to Top