Use enter key instead of tab key in RadGrid EditMode window

6 posts, 0 answers
  1. Erena
    Erena avatar
    3 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Hi,

    I have an EditFormSettings section in my RadGrid control which uses a FormTemplate. The FormTemlate contains multiple of RadTextBox controls and currently the only way to navigate through the controls is using the Tab key. Is there anyway to change the Enter key to behave like the Tab key in edit mode?

    i.e. OnClientKeyPressing:
    if (window.event.keyCode == 13) {
    window.event.keyCode = 9;
    }


    Thank you!


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jun 2013 Link to this post

    Hi Erena,

    Please have a look at the sample code I tried which works as expected.

    ASPX:
    <EditFormSettings EditFormType="Template">
        <FormTemplate>
            <telerik:RadTextBox ID="RadTextBox1" runat="server" onKeyDown="checkEnter()">
            </telerik:RadTextBox>
            <br />
            <telerik:RadTextBox ID="RadTextBox2" runat="server" onKeyDown="checkEnter()">
            </telerik:RadTextBox>
            <br />
            <telerik:RadTextBox ID="RadTextBox3" runat="server" onKeyDown="checkEnter()">
            </telerik:RadTextBox>
        </FormTemplate>
    </EditFormSettings>

    JavaScript:
    <script type="text/javascript">
        function checkEnter() {
            if (event.keyCode == 13) {
                event.keyCode = 9;
            }
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erena
    Erena avatar
    3 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    Hi Shinu,

    That worked like charm, thank you!
  5. Marius
    Marius avatar
    10 posts
    Member since:
    Aug 2012

    Posted 10 Jun 2014 Link to this post

    That is fine in IE but this does not work in CHROME....any suggestions on getting it to work in CHROME?
  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 13 Jun 2014 Link to this post

    Hi Marius,

    in order to have the functionality working in all browsers you could use jQuery to focus the next input element.

    If you have markup similar to the following:

    <EditFormSettings EditFormType="Template">
        <FormTemplate>
            <telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="tb" ClientEvents-OnLoad="onClientLoad">
            </telerik:RadTextBox>
            <telerik:RadTextBox ID="RadTextBox2" runat="server" CssClass="tb" >
            </telerik:RadTextBox>
            <telerik:RadTextBox ID="RadTextBox3" runat="server" CssClass="tb" >
            </telerik:RadTextBox>
        </FormTemplate>
    </EditFormSettings>

    Try using the JavaScript code below to implement the functionality:

    function onClientLoad(sender, args) {
        $telerik.$('.tb').bind('keypress', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                $telerik.$(this).parent().next().children()[0].focus();
            }
        });
    }

    Let me know how this approach is working for you.

    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Marius
    Marius avatar
    10 posts
    Member since:
    Aug 2012

    Posted 10 Oct 2014 in reply to Viktor Tachev Link to this post

    Hi implemented your suggestion and it worked! 
    Thank you
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017