How do I use images instead of text for AutoGenerateEditButton in ASP.Net GridView

Question

I'm using AutoGenerateEditButton and the Delete and Select ones as well.

I'd like to use images instead of text for the links.

How do I do this?

I don't want to manually create the command columns, since the AutoGenerate properties are used throughout a large project I'm working on.

Answer 1

Super old post, but for anyone who wants a clean reusable class for this:

public class ImageGridview : GridView{
    protected override ICollection CreateColumns(PagedDataSource dataSource, bool useDataSource)
    {
        ArrayList fieldsArray = base.CreateColumns(dataSource, useDataSource);
        CommandField cf = (from o in fieldsArray
                           where o.GetType() == typeof(CommandField)
                           select (CommandField)o).FirstOrDefault();
        if (cf != null)
        {
            cf.ButtonType = ButtonType.Image;
            cf.DeleteImageUrl = "~/images/delete.png";
            cf.EditImageUrl = "~/images/edit.png";
            cf.SelectImageUrl = "~/images/select.png";
            cf.CancelImageUrl = "~/images/cancel.png";
            cf.UpdateImageUrl = "~/images/update.png";
        }
        return fieldsArray;
    }
}

Answer 2

Subclass the GridView control and over ride the CreateChildControls method

    protected override int CreateChildControls(System.Collections.IEnumerable dataSource, bool dataBinding)
    {
        // re-use the AutoGenerate...Button properties
        bool showDelete = AutoGenerateDeleteButton;
        bool showEdit = AutoGenerateEditButton;
        bool showSelect = AutoGenerateSelectButton;

        // turn them all off, we'll be creating our own
        AutoGenerateDeleteButton = false;
        AutoGenerateEditButton = false;
        AutoGenerateSelectButton = false;

        // hide the column if it already exists
        if (Columns[0].GetType() == typeof(CommandField))
        {
            Columns.RemoveAt(0);
        }

        // add the command column if necessary
        if (showDelete || showEdit || showSelect)
        {
            CommandField cmdField = new CommandField();
            cmdField.HeaderText = string.Empty;
            cmdField.ButtonType = ButtonType.Image;
            cmdField.ShowSelectButton = showSelect;
            cmdField.ShowEditButton = showEdit;
            cmdField.ShowDeleteButton = showDelete;
            cmdField.DeleteImageUrl = "~/images/delete.bmp";
            cmdField.EditImageUrl = "~/images/edit.bmp";
            cmdField.SelectImageUrl = "~/images/select.bmp";

            Columns.Insert(0, cmdField);
        }

        // this will show the grid even if there is no data
        int numRows = base.CreateChildControls(dataSource, dataBinding);

        //no data rows created, create empty table if enabled
        if (numRows == 0 && ShowWhenEmpty)
        {
            //create table
            Table table = new Table();
            table.ID = this.ID;

            //convert the exisiting columns into an array and initialize
            DataControlField[] fields = new DataControlField[this.Columns.Count];
            this.Columns.CopyTo(fields, 0);

            if (this.ShowHeader)
            {
                //create a new header row
                _headerRow2 = base.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);

                this.InitializeRow(_headerRow2, fields);
                table.Rows.Add(_headerRow2);
            }

            //create the empty row
            GridViewRow emptyRow = new GridViewRow(-1, -1, DataControlRowType.EmptyDataRow, DataControlRowState.Normal);

            TableCell cell = new TableCell();
            cell.ColumnSpan = this.Columns.Count;
            cell.Width = Unit.Percentage(100);
            if (!String.IsNullOrEmpty(EmptyDataText))
                cell.Controls.Add(new LiteralControl(EmptyDataText));

            if (this.EmptyDataTemplate != null)
                EmptyDataTemplate.InstantiateIn(cell);

            emptyRow.Cells.Add(cell);
            table.Rows.Add(emptyRow);

            if (this.ShowFooter)
            {
                //create footer row
                _footerRow2 = base.CreateRow(-1, -1, DataControlRowType.Footer, DataControlRowState.Normal);

                this.InitializeRow(_footerRow2, fields);
                table.Rows.Add(_footerRow2);
            }

            this.Controls.Clear();
            this.Controls.Add(table);
        }

        // I wanted one place to set alternating color for all instances of this control
        base.AlternatingRowStyle.BackColor = System.Drawing.Color.LightBlue;

        // now that the controls have been created, it's safe to reset these to their original values.  They'll be needed if you bind data later
        AutoGenerateDeleteButton = showDelete;
        AutoGenerateEditButton = showEdit;
        AutoGenerateSelectButton = showSelect;

        return numRows;
    }

Answer 3

The easiest way to do this is to handle it all yourself. Here is a quick example using an ImageButton to replace the edit command button:

<asp:GridView ID="yourGrid" runat="server" OnRowEditing="yourGrid_RowEditing">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="yourEditButton" runat="server"
                    CommandName="Edit" ImageUrl="edit.jpg" />
            </ItemTemplate>
            <EditItemTemplate>
                <!-- your edit controls here -->
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Now for the code behind:

protected void yourGrid_RowEditing(object sender, GridViewEditEventArgs e)
{
    // You could just do yourGrid and ignore casting the sender but this 
    // makes the code generic for reuse.
    GridView grid = (GridView)sender;   
    grid.EditIndex = e.NewEditIndex;
    BindData(); // need to rebind once the edit index is set.
}

This pretty much replaces the auto generated edit button with an ImageButton. By setting the CommandName to edit, it will trigger the exact same events as the auto generated edit button. This would also apply to delete, update, etc...

Answer 4

You can go with GridView.RowDataBound event. On that, use FindControl do customized your autogenerate button:

protected void yourGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton link = e.Row.Cells[0].Controls[0] as LinkButton;
        // do your stuff
    }
}