function checkEnter6() {
if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
if (event.keyCode === 13) {
var grid = $find("<%= rgClaimLines.ClientID %>");
if (grid) {
var EditItems = grid.get_editItems();
for (var i = 0; i < EditItems.length; i++) {
var editItem = EditItems[0];
var textBox = $(editItem.get_editFormItem()).find("input[id*='ddl_Paid']").get(0);
textBox.focus();
event.preventDefault();
return false;
}
}
}
} else {
if (event.keyCode === 13) {
event.keyCode = 9;
}
}
}
In this function I am able to override the enter key in chrome to set focus to the next input field. My problem is moving focus from the last input field to the Update button of the GridEditCommandColumn.
Any ideas out there?
Cheers
Marius
if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
if (event.keyCode === 13) {
var grid = $find("<%= rgClaimLines.ClientID %>");
if (grid) {
var EditItems = grid.get_editItems();
for (var i = 0; i < EditItems.length; i++) {
var editItem = EditItems[0];
var textBox = $(editItem.get_editFormItem()).find("input[id*='ddl_Paid']").get(0);
textBox.focus();
event.preventDefault();
return false;
}
}
}
} else {
if (event.keyCode === 13) {
event.keyCode = 9;
}
}
}
In this function I am able to override the enter key in chrome to set focus to the next input field. My problem is moving focus from the last input field to the Update button of the GridEditCommandColumn.
Any ideas out there?
Cheers
Marius
5 Answers, 1 is accepted
0
Hi Marius,
If you are using the auto generated update form you could use the following approach to focus the update button. In the sample below the update button is rendered as an <a> element.
Let me know if this is working for you. In case the approach is not applicable in your scenario, would you elaborate more on the setup that you have? Are you using an auto generated edit form or a custom template?
Regards,
Viktor Tachev
Telerik
If you are using the auto generated update form you could use the following approach to focus the update button. In the sample below the update button is rendered as an <a> element.
function
focusUpdateButton(sender, args) {
$telerik.$(
"td [colspan=1] a"
)[0].focus();
}
Let me know if this is working for you. In case the approach is not applicable in your scenario, would you elaborate more on the setup that you have? Are you using an auto generated edit form or a custom template?
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 17 Jun 2014, 11:40 AM
Hi Vikto, unfortunately it did not work for me, but seeing that the Update button was the next logical command control to be activeated in the process, I got a workaround in the following manner :
​
function checkEnter7() {
if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
if (event.keyCode === 13) {
__doPostBack('ctl00$MainContent$rpbActions$i0$ucCaptureClaim$rpbClaim$i2$rgClaimLines$ctl00$ctl04$UpdateButton', '');
event.preventDefault();
return false;
}
}
else {
if (event.keyCode === 13) {
event.keyCode = 9;
}
}
}
PS. Now the challenge is to get function working on rows 2,3 4 etc...It only works on the first row :(
Regards and thank you for your response!
Marius
​
function checkEnter7() {
if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
if (event.keyCode === 13) {
__doPostBack('ctl00$MainContent$rpbActions$i0$ucCaptureClaim$rpbClaim$i2$rgClaimLines$ctl00$ctl04$UpdateButton', '');
event.preventDefault();
return false;
}
}
else {
if (event.keyCode === 13) {
event.keyCode = 9;
}
}
}
PS. Now the challenge is to get function working on rows 2,3 4 etc...It only works on the first row :(
Regards and thank you for your response!
Marius
0
Hello Marius,
I have prepared a sample project that illustrates the approach. It is attached to this post.
In the sample, a client-side handler is attached to the keypress event of the TextBox generated for the "Description" column.
The JavaScript handler looks like the following:
Try using similar approach and you should be able to achieve the behavior you are looking for.
Regards,
Viktor Tachev
Telerik
I have prepared a sample project that illustrates the approach. It is attached to this post.
In the sample, a client-side handler is attached to the keypress event of the TextBox generated for the "Description" column.
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridEditFormItem && e.Item.IsInEditMode)
{
GridEditFormItem editForm = e.Item
as
GridEditFormItem;
TextBox textBox = editForm[
"Description"
].Controls[0]
as
TextBox;
textBox.Attributes.Add(
"onkeypress"
,
"keyPress(this, event);"
);
}
}
The JavaScript handler looks like the following:
function
keyPress(sender, args) {
if
(args.keyCode == 13) {
args.preventDefault();
var
updateButton = $telerik.$(sender).parents(
".rgEditForm"
).find(
"td[colspan=1] a"
).first();
if
(updateButton) {
updateButton.focus();
}
}
}
Try using similar approach and you should be able to achieve the behavior you are looking for.
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 19 Jun 2014, 10:12 AM
Thanx Viktor, I subsequently figured out that my use of get_editFormItem() is incorrect. I do inplace editing...will this make a difference in the code?
0
Accepted
Hi Marius,
The approach when using InPlace EditMode would be similar, however you would need to make some modifications. In order to attach the keypress event handler to the TextBox control the ItemCreated should be modified like shown below:
Also the client-side handler should be modified in order to get reference to the LinkButton:
Additionally I am attaching a modified version of the sample project. Try using similar approach and you should be able to achieve the behavior you are looking for.
Regards,
Viktor Tachev
Telerik
The approach when using InPlace EditMode would be similar, however you would need to make some modifications. In order to attach the keypress event handler to the TextBox control the ItemCreated should be modified like shown below:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if
(e.Item is GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem editForm = e.Item as GridEditableItem;
TextBox textBox = editForm[
"Description"
].Controls[0] as TextBox;
textBox.Attributes.Add(
"onkeypress"
,
"keyPress(this, event);"
);
}
}
Also the client-side handler should be modified in order to get reference to the LinkButton:
function
keyPress(sender, args) {
if
(args.keyCode == 13) {
args.preventDefault();
var
updateButton = $telerik.$(sender).parents(
"tr"
).find(
"td a"
).first();
if
(updateButton) {
updateButton.focus();
}
}
}
Additionally I am attaching a modified version of the sample project. Try using similar approach and you should be able to achieve the behavior you are looking for.
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.