Possible to replace a ButtonField with an image in a GridView?
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 possib开发者_StackOverflow社区le? 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.
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
}
}
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!
精彩评论