Possible to replace a ButtonField with an image in a GridView?

Question

I have a GridView which has a delete link to delete a record. I have created a DeleteButtonField class but I want to replace the text with an image (an icon). Is this possible? Here's my GridView:

<asp:GridView 
    ID="GridView1" 
    runat="server"
    <.. removed dome properties ..> 
    >
    <Columns>
    <CustomControls:DeleteButtonField ConfirmText="Delete this record?" /> 
    <.. other columns ..>
    </Columns>
</asp:GridView>

and here's my DeleteButtonField class:

using System;
using System.Web.UI.WebControls;

namespace CustomControls
{
    public class DeleteButtonField : ButtonField
    {
        private string _confirmText = "Delete this record?";

        public string ConfirmText
        {
            get { return _confirmText; }
            set { _confirmText = value; }
        }

        public DeleteButtonField()
        {
            this.CommandName = "Delete";
            this.Text = "Delete";
            this.ImageUrl = "App_GlobalResources/Del.png";   // doesn't work
        }

        public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)
        {
            base.InitializeCell(cell, cellType, rowState, rowIndex);
            if (cellType == DataControlCellType.DataCell)
            {
                WebControl button = (WebControl)cell.Controls[0];
                button.Attributes["onclick"] = String.Format("return confirm('{0}');", _confirmText);
            }
        }
    }
}

Is this possible? As you can see I add the following code to my DeleteButtonField.cs class but it had no effect: this.ImageUrl = "App_GlobalResources/Del.png";

Thanks.

Answer 1

Let's trash the idea of overriding the button field and go with a simple template field. It will handle the post backs correctly and raise the GridView's (RowCommand & RowDeleting) events. Hope this helps! =)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace MyExample.Web
{
    public class MyDeleteButtonField : TemplateField
    {
        #region Properties

        private string _ConfirmText = "Delete Me?";
        public string ConfirmText
        {
            get { return _ConfirmText; }
            set { _ConfirmText = value; }
        }

        private string _ImageUrl = "~/Assets/Images/Buttons/flip.png";
        public string ImageUrl
        {
            get { return _ImageUrl; }
            set { _ImageUrl = value; }
        }

        #endregion

        #region Methods

        public override bool Initialize(bool sortingEnabled, System.Web.UI.Control control)
        {
            base.ItemTemplate = new MyTemplate(this.ConfirmText, this.ImageUrl);
            return base.Initialize(sortingEnabled, control);
        }

        #endregion

        #region Template

        public class MyTemplate : ITemplate
        {
            private string _ConfirmText;
            private string _ImageUrl;

            public MyTemplate(string confirmText, string imageUrl)
            {
                _ConfirmText = confirmText;
                _ImageUrl = imageUrl;
            }

            void ITemplate.InstantiateIn(Control container)
            {
                ImageButton bt = new ImageButton();
                bt.CommandName = "Delete";
                bt.ImageUrl = _ImageUrl;
                bt.ImageAlign = ImageAlign.AbsMiddle;
                bt.AlternateText = "Delete Me";
                bt.OnClientClick = String.Format("return confirm('{0}');", _ConfirmText);
                container.Controls.Add(bt);

            }
        }

        #endregion

    }
}

Answer 2

Mark, I think you're custom class is very, very close. For the ButtonField class to show an image you need to both specify the ImageUrl property and set the ButtonType property to ButtonType.Image.

Try updating your DeleteButtonField class's constructor to:

public DeleteButtonField()
{
    this.CommandName = "Delete";
    this.Text = "Delete";
    this.ImageUrl = "App_GlobalResources/Del.png";
    this.ButtonType = ButtonType.Button;
}

Alternatively, you could specify these settings through the declarative syntax in the .aspx page:

<CustomControls:DeleteButtonField ConfirmText="Delete this record?" ImageUrl='...' ButtonType="Image" /> 

Happy Programming!