Just recently I had to style an asp datagrid that another developer had created. Now almost all of our default styles for this site use simple image buttons for actions but the datagrid automatically pumps out the Edit, Cancel, and Delete buttons as plain text. Unfortunately Microsoft have given very little control to designers/developers over what is pumped out onto the page, so it’s pretty much a link, or an input button as standard.

I had a brief look for a way around this and found lots of people with similar problems but no perfect way round this problem.

The simplest way I found around the problem is to put an image tag into the text attribute. E.g.:

<asp:EditCommandColumn HeaderText=”Actions” ButtonType=”LinkButton” UpdateText=”<img src=’../images/buttons/small/updatesmall.png’ alt=’Update’ />” CancelText=”<img src=’../images/buttons/small/cancelsmall.png’ alt=’Cancel’ />” EditText=”<img src=’../images/buttons/small/editsmall.png’ alt=’Edit’ />“></asp:EditCommandColumn>

This does work but it doesn’t have any hover effects on mouse over,  nor does it allow you to use css sprites to keep load times down. In this case it also meant that I’d have to create seperate images for every action.

So what I did instead was the following; I added an itemStyleCssClass attribute to the EditCommandColumn with my button style on it, then I put span’s into the text for Edit, Cancel, and Update that have a specific class for each button type:

<asp:EditCommandColumn HeaderText=”Actions” ItemStyle-CssClass=”grey_small_circle” ButtonType=”LinkButton” UpdateText=”<span class=’tick’>Update</span>” CancelText=”<span class=’cancel’>Cancel</span>” EditText=”<span class=’edit’>Edit</span>“></asp:EditCommandColumn>

Then I added the following CSS:

/*Create buttons and add hover effect */

.grey_small_circle a{background:url(/admin/images/buttons/medium/grey_small_circle.png) no-repeat 0 0;display:block;line-height:30px;margin-top:1px;outline:none;width:31px}
.grey_small_circle a:hover,a:hover.grey_small_circle{background-position:0 -30px;color:#00affc;text-decoration:none}

/* Add the image inside */

.grey_small_circle span{background:transparent url(/images/icons/medium/all.png) no-repeat -288px -252px;display:block;height:30px;text-indent:-9000px;width:32px}

.grey_small_circle span.edit{background-position:-242px -201px}
.grey_small_circle span.redcross{background-position:-13px -252px}
.grey_small_circle span.remove{background-position:-427px -357px}

This css adds the grey circle in the background of the buttons (see the screenshot) and makes the hover work using the sliding doors technique.

I then use css sprites for putting an action image onto each button (using the class we assigned to the span), this technique speeds up load times and stops the unstyled pauses when a user hovers over a button. The last lines of the css attach a sheet of sprites  (in this case the excellent PI Diagona icons from pinvoke) and moves them depending on which button needs to be displayed.

Images naturally sit on the baseline. This means that they’re about 4px up from the bottom normally. Setting vertical-align: bottom or display:block seems to clear it.

The solution for this was found here.