Click here to Skip to main content
Click here to Skip to main content
Go to top

Extending the GridView CommandField To Add Delete Confirmation

, 5 Sep 2007
Rate this:
Please Sign up or sign in to vote.
Tired of constantly writing the same labourious plumbing to add a confirmation to a delete button in a GridView? I was, so I simplified things.
Screenshot - ExtendedCommandField.gif

Introduction

We've all added delete confirmations before; they're a really great way of stopping users from doing something they didn't intend with disastrous consequences. Sadly the GridView's CommandField doesn't natively support this, requiring lots of boring plumbing to be duplicated in code-behind files. This article describes a simple, clean and reusable method of adding a delete confirmation by extending the CommandField control.

Background

This article roughly follows on from my previous article on extending the GridView control and illustrates in a similar manner, the advantage of extending existing controls to provide additional functionality.

About the Code

The sample project contains a demo form and the key class ExtendedCommandField. It simply inherits from the standard CommandField class and provides a new property, DeleteConfirmationText, that allows you to set the text that will appear in the confirmation box. If no text is supplied, the field behaves like a standard CommandField and provides no delete confirmation. When the property is set, the usual basic JavaScript to display the confirmation box is added to the delete button.

This is all done in the InitializeCell method where you can perform all sorts of tricks to further customize the appearance and behaviour of the field.

/// <span class="code-SummaryComment"><summary></span>
/// An extended <span class="code-SummaryComment"><see cref="CommandField"/> that allows deletions</span>
/// to be confirmed by the user.
/// <span class="code-SummaryComment"></summary></span>
public class ExtendedCommandField : CommandField
{
    /// <span class="code-SummaryComment"><summary></span>
    /// Initialize the cell.
    /// <span class="code-SummaryComment"></summary></span>
    public override void InitializeCell(DataControlFieldCell cell, 
        DataControlCellType cellType, DataControlRowState rowState, int rowIndex)
    {
        base.InitializeCell(cell, cellType, rowState, rowIndex);
        if (!string.IsNullOrEmpty(this.DeleteConfirmationText) && this.ShowDeleteButton)
        {
            foreach (Control control in cell.Controls)
            {
                IButtonControl button = control as IButtonControl;
                if (button != null && button.CommandName == "Delete")
                    // Add delete confirmation
                    ((WebControl)control).Attributes.Add("onclick", string.Format
                    ("if (!confirm('{0}')) return false;", this.DeleteConfirmationText));
            }
        }
    }

    #region DeleteConfirmationText
    /// <span class="code-SummaryComment"><summary></span>
    /// Delete confirmation text.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Behavior")]
    [Description("The text shown to the user to confirm the deletion.")]
    public string DeleteConfirmationText
    {
        get { return this.ViewState["DeleteConfirmationText"] as string; }
        set { this.ViewState["DeleteConfirmationText"] = value; }
    }
    #endregion
}

Using the Code

You can then use the ExtendedCommandField in your GridView just as you would a normal column.

<asp:GridView ID="grid" runat="server">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="StockLevel" HeaderText="Stock Level" />
        <Alex:ExtendedCommandField DeleteConfirmationText=
            "Are you sure you want to remove this item?" 
            HeaderText="Action" ShowDeleteButton="True" />
    </Columns>
</asp:GridView> 

Don't forget, of course, that you'll need a @Register directive at the top of the page so ASP.NET knows where to find the control.

Points of Interest

The InitializeCell method is a convenient way to customize the behaviour and appearance of GridView fields. More generally, one could easily extend the DataControlField to provide completely custom behaviour. One such extension I intend to develop soon is a DropDownListField which allows users to select values from a DropDownList within a GridView cell.

History

  • 06-Sep-07: First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alex Furmanski
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
AnswerThis is a great custom control !! Thanks Pinmembermiraiyer9-Apr-14 4:47 
QuestionHow to make command field work in the gridview1? PinmemberWu John11-Mar-13 3:31 
GeneralProblem: "Error Creating Control" PinmemberMember 474288810-Jun-10 23:45 
GeneralThanks! PinmemberBiff_MaGriff2-Jun-10 11:37 
GeneralGood idea PinmemberDonsw13-Apr-09 9:44 
GeneralJust great Pinmemberldelvasto3-Feb-09 5:36 
QuestionUser or Server Control? Pinmemberorganicglenn22-Dec-08 11:57 
GeneralDesigner problem Pinmembermiguel.hughes19-Nov-08 7:57 
QuestionHow to disable DeleteButton? [modified] Pinmemberqwedster23-Oct-08 19:18 
QuestionQuick Question... PinmemberJMirando28-Sep-08 2:12 
GeneralExcellent PinmemberLeblanc Meneses20-Mar-08 19:45 
GeneralSuperb! PinmemberJayAdair14-Mar-08 13:17 
GeneralThanks a lot!! PinmemberHacheka21-Feb-08 23:00 
GeneralProps and Question Pinmemberinetfly12321-Feb-08 9:42 
GeneralRe: Props and Question PinmemberAlex Furmanski22-Feb-08 0:16 
GeneralThanks saved me tons of time on this Pinmembercodegalaxy16-Nov-07 4:53 
QuestionTemplateField? Pinmembertmbgfan7-Sep-07 3:55 
AnswerRe: TemplateField? PinmemberAlex Furmanski7-Sep-07 9:27 
GeneralRe: TemplateField? PinmemberLarry Daniele31-Oct-08 10:15 
GeneralUsefull PinmemberNinjaCross6-Sep-07 5:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 5 Sep 2007
Article Copyright 2007 by Alex Furmanski
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid