KevinUp

real world programming

ImageButton

Posted by kevinup on June 26, 2007

Myself, and some of the developers at work, were trying to minimize a page size. We had a datagrid, that was returning 100 rows. The search was returning in less than 1 second, but it was taking a long time to render the page. The page itself came in around 360k. We started looking at the controls getting rendered within the datagrid. All of the controls that we use are overridden, which makes it convenient to optimize and incorporate more functionality in various controls. Here is something that we notice, the ImageButton was rendering with ‘style=”border-width:0px;”‘ so it looked like this:

<input type=”image” name=”ImageButton1″ id=”Image1″ src=”myimage.gif” style=”border-width:0px;” />

We first thought that we should move the border from the HTML into a style sheet. We started looking in our custom control and didn’t see anywhere that we were adding the border. Then we came to the realization, why do we even need the border at all? An input type of button won’t render with a border. We started up reflector and started looking at how it was being rendered. I won’t go into the specifics, but here is the cuprit:

if (this.BorderWidth.IsEmpty)
{
    if (base.EnableLegacyRendering)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Border, "0", false);
        return;
    }
    writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0px");
}

What we wanted to do, is set a flag to not run this code at all. The way is is written, you can either set the border to something. Or have it set it to 0px. You can’t override it. So if you have an image, and you want to set the border to 0px in CSS you have to override this function:

protected override void AddAttributesToRender(HtmlTextWriter writer);

What we ended up doing is copying the function off of reflector, pasting it into our custom control, and removing this code. So I guess you at least have the ability to fix this ‘bug’ in .net. Its too bad there wasn’t enough polish put in from the beginning, because you don’t to set the border at all.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

 
%d bloggers like this: