I had a recent problem when working with ajax update panels on an asp.net application. I basically had a panel with lots of drop down boxes and text boxes inside it. Whenever a drop down was changed or a value was entered in a textbox, the whole panel would be recalculated as it contained totals and sub totals based on the contents of these boxes.
The problem I had was that I had to include all of the controls inside the update panel otherwise I would have ended up with 20-30 update panels on the page, a situation that I really wanted to avoid. Because the controls were inside the panel every partial postback I was losing the focus as effectively even though you don’t see it, the panel is destroyed and rebuilt every time.
So it became impossible for a user to just tab through the form updating values, as the focus was reset with every field, not an ideal user friendly situation.
So after much research I discovered that you can actually force focus to an individual control using the script manager control in the server side code. The code to do this is pretty simple, and would be something like:
Me.ScriptManager1.SetFocus(Textbox1)Where scriptmanager1 is the name of your script manager control and textbox1 is the name of the control you want to set the focus too.
Now this is fine if you always know which control should have the focus, however if you have a lot of controls being processed inside one update panel you might not know which control to focus on next. Thankfully I found a neat little javascript on this blog http://couldbedone.blogspot.com/2007/08/restoring-lost-focus-in-update-panel.html That you can include with your script manager on any page, the javascipt will take care of all your focus problems for any update panels you have on your page. I’ll include the full script code below, don’t ask me to explain how it works, I’m just happy that it does and hope it will be of some use to you.
// JScript File
var lastFocusedControlId = "";
function focusHandler(e)
{
document.activeElement = e.originalTarget;
}
function appInit()
{
if (typeof(window.addEventListener) !== "undefined")
{
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args)
{
lastFocusedControlId = typeof(document.activeElement) === "undefined"
? "" : document.activeElement.id;}function focusControl(targetControl)
{
if (Sys.Browser.agent === Sys.Browser.InternetExplorer)
{
var focusTarget = targetControl;
if (focusTarget && (typeof(focusTarget.contentEditable) !== "undefined"))
{
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else
{
focusTarget = null;
}
targetControl.focus();
if (focusTarget)
{
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else
{
targetControl.focus();
}
}
function pageLoadedHandler(sender, args)
{
if (typeof(lastFocusedControlId) !== "undefined" && lastFocusedControlId != "")
{
var newFocused = $get(lastFocusedControlId);
if (newFocused)
{
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
My blog is mainly about programming in .Net 2, website promotion and affiliate marketing although I do have the odd ramble on about anything that comes to mind.
