Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAsyncUpload KeyBoard Support Not Working

4 Answers 108 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Abhinav
Top achievements
Rank 1
Abhinav asked on 18 Jan 2013, 10:52 AM
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)
    {
 
    }
}

4 Answers, 1 is accepted

Sort by
0
MasterChiefMasterChef
Top achievements
Rank 2
answered on 18 Jan 2013, 04:36 PM
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
0
Abhinav
Top achievements
Rank 1
answered on 21 Jan 2013, 06:38 AM
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;
    }
}
0
Plamen
Telerik team
answered on 22 Jan 2013, 01:27 PM
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.
0
jumhoye
Top achievements
Rank 1
answered on 02 May 2018, 09:37 AM
yes
Tags
AsyncUpload
Asked by
Abhinav
Top achievements
Rank 1
Answers by
MasterChiefMasterChef
Top achievements
Rank 2
Abhinav
Top achievements
Rank 1
Plamen
Telerik team
jumhoye
Top achievements
Rank 1
Share this question
or