This is a migrated thread and some comments may be shown as answers.

Use enter key instead of tab key in RadGrid EditMode window

5 Answers 283 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Erena
Top achievements
Rank 1
Erena asked on 24 Jun 2013, 07:52 PM
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!


5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 25 Jun 2013, 04:51 AM
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.
0
Erena
Top achievements
Rank 1
answered on 25 Jun 2013, 02:59 PM
Hi Shinu,

That worked like charm, thank you!
0
Marius
Top achievements
Rank 1
answered on 10 Jun 2014, 11:48 AM
That is fine in IE but this does not work in CHROME....any suggestions on getting it to work in CHROME?
0
Viktor Tachev
Telerik team
answered on 13 Jun 2014, 10:16 AM
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.

 
0
Marius
Top achievements
Rank 1
answered on 10 Oct 2014, 10:37 AM
Hi implemented your suggestion and it worked! 
Thank you
Tags
Ajax
Asked by
Erena
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Erena
Top achievements
Rank 1
Marius
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or