What it does
The Focus extender will allow you to set the input focus to a particular control on your web form. I know that with ASP.NET v2 you can use the DefaultFocus attribute of the
tag to set the focus but that does not work well with Master Pages.
How to use it.
In your ASP.NET source page you need to register a tag prefix to the DLL as shown below.
<%@ Register Assembly="Focus" Namespace="Focus" TagPrefix="trmb" %>
You then need to add the tags to the page to control the focus.
<trmb:FocusExtender ID="Focusextender1" runat="server">
<trmb:FocusProperties TargetControlID="txtPN" />
</trmb:FocusExtender>
There is really only one property which you need to set which is the TargetControlID. You simply set this to the ID of the server control to set the focus to.
The source code
The source is made up of 4 primary files - the easiest way to generate source code for an Atlas Control Extender is to use the Add - New Project dialog and select the "Atlas" control project
Creating a project using the "Atlas" control project template will create 4 files for you:
- [ProjectName]Behavior.js
- [ProjectName]Designer.cs
- [ProjectName]Extender.cs
- [ProjectName]Properties.cs
Note: If you do not see the "Atlas" control project listed then you need to install the "Atlas Control Extender" templates.
Note that the "Atlas Control Extender" is for building extenders and controls, not web sites, and therefore does not work with
Visual Web Developer - it is for use with Visual C#, Visual Basic, or Visual Studio
- In the folder where you installed the "Atlas" Control Toolkit package, you will find a folder called "AtlasControlExtender" with a file called "AtlasControlExtender.vsi" inside it - double-click AtlasControlExtender.vsi to install it
- Choose which templates you would like to install (it is recommended to install all templates), then click "Next", then "Finish"
- You have now installed the templates are ready to create your "Atlas" Extenders!
FocusBehavior.js
The changes made to this file have been to remove some features that we did not need to keep the file size smaller.
The code in bold is all that we have to implement to get the control to focus.
Type.registerNamespace('Focus');
Focus.FocusBehavior = function() {
Focus.FocusBehavior.initializeBase(this);
this.initialize = function() {
Focus.FocusBehavior.callBaseMethod(this, 'initialize');
var e = this.control.element;
if (e != null)
e.focus();
}
}
Focus.FocusBehavior.registerSealedClass('Focus.FocusBehavior', Microsoft.AtlasControlExtender.BehaviorBase);
Sys.TypeDescriptor.addType('focus', 'FocusBehavior', Focus.FocusBehavior);
FocusDesigner.cs
No changes were made to this file
using System.Web.UI.WebControls;
using System.Web.UI;
using Microsoft.AtlasControlExtender;
using Microsoft.AtlasControlExtender.Design;
namespace Focus
{
class FocusDesigner : ExtenderControlBaseDesigner
{
}
}
FocusExtender.cs
No changes were made to this file
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using Microsoft.AtlasControlExtender;
#region Assembly Resource Attribute
[assembly: System.Web.UI.WebResource("Focus.FocusBehavior.js", "text/javascript")]
#endregion
namespace Focus
{
[Designer(typeof(FocusDesigner))]
[ClientScriptResource("Focus", "FocusBehavior", "Focus.FocusBehavior.js")]
public class FocusExtender : ExtenderControlBase
{
}
}
FocusProperties.cs
The changes made to this file was to basically remove everything and leave it as below since we did not need any custom properties defined.
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using Microsoft.AtlasControlExtender;
namespace Focus
{
[DefaultProperty("TargetControlID")]
public class FocusProperties : TargetControlPropertiesBase
{
}
}