Use enter key instead of tab key in RadGrid EditMode window

[Erena]

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!





[Shinu]

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.

[Erena]

Hi Shinu,

That worked like charm, thank you!

[Marius]

That is fine in IE but this does not work in CHROME....any suggestions on getting it to work in CHROME?

[Viktor Tachev]

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

 

 

[Marius]

Hi implemented your suggestion and it worked! 
Thank you