Click here to Skip to main content
11,643,493 members (75,696 online)
Click here to Skip to main content

Extending the GridView CommandField To Add Delete Confirmation

, 5 Sep 2007 CPOL 92.2K 1.2K 58
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

You may also be interested in...

Comments and Discussions

 
AnswerThis is a great custom control !! Thanks Pin
miraiyer9-Apr-14 4:47
membermiraiyer9-Apr-14 4:47 
QuestionHow to make command field work in the gridview1? Pin
Wu John11-Mar-13 3:31
memberWu John11-Mar-13 3:31 
GeneralProblem: "Error Creating Control" Pin
Member 474288810-Jun-10 23:45
memberMember 474288810-Jun-10 23:45 
GeneralThanks! Pin
Biff_MaGriff2-Jun-10 11:37
memberBiff_MaGriff2-Jun-10 11:37 
GeneralGood idea Pin
Donsw13-Apr-09 9:44
memberDonsw13-Apr-09 9:44 
GeneralJust great Pin
ldelvasto3-Feb-09 5:36
memberldelvasto3-Feb-09 5:36 
QuestionUser or Server Control? Pin
organicglenn22-Dec-08 11:57
memberorganicglenn22-Dec-08 11:57 
GeneralDesigner problem Pin
miguel.hughes19-Nov-08 7:57
membermiguel.hughes19-Nov-08 7:57 
QuestionHow to disable DeleteButton? [modified] Pin
qwedster23-Oct-08 19:18
memberqwedster23-Oct-08 19:18 
QuestionQuick Question... Pin
JMirando28-Sep-08 2:12
memberJMirando28-Sep-08 2:12 

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 | Terms of Use | Mobile
Web03 | 2.8.150731.1 | Last Updated 5 Sep 2007
Article Copyright 2007 by Alex Furmanski
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid