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

How to set focus to UpdateButton of GridEditCommandColumn in edit item

5 Answers 126 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marius
Top achievements
Rank 1
Marius asked on 11 Jun 2014, 08:48 AM
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 

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 16 Jun 2014, 07:17 AM
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.

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
0
Viktor Tachev
Telerik team
answered on 18 Jun 2014, 02:50 PM
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.

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
Viktor Tachev
Telerik team
answered on 19 Jun 2014, 01:04 PM
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:

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.

 
Tags
Grid
Asked by
Marius
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Marius
Top achievements
Rank 1
Share this question
or