The inner workings of Relate+ Button

Early on in the development of the EPiServer Relate+ template package we decided to use a custom web control for all the buttons instead of using the standard System.Web.UI.WebControls.Button. There were many reasons to go down this path:

• In the early stages we didn’t know if we wanted a Button or a LinkButton
• Enable the possibility to change the layout of the button more than you can do with CSS
• We wanted to make it easy for developers working with Relate+ to customize all the buttons in one place

Lucky for us that we made this decision since the layout of the button changed three or four times along the way. Anyhow, in the end we decided to go with a LinkButton with a span-element wrapped around it to enable the desired layout. This was done by inheriting from LinkButton and override the RenderBeginTag and RenderEndTag methods. Pretty straight forward stuff.

The decision to go with a LinkButton caused us some problem when we wanted to utilize the DefaultButton property of ASP.NET to enable sending forms on enter keystroke. In Internet Explorer everything worked fine, but in Firefox it didn’t. The reason is that a LinkButton will result in an a-element in the HTML and Firefox doesn’t define a click() method for the a-element.

But there is a solution! Inspired by this great blog post by Dmytro Shteflyuk we added some JavaScript to our custom LinkButton that adds a click() method to the a element if it does not already exist. Once this is done we will be able to submit forms by pressing enter regardless of which browser we are using, happy days!