Click here to Skip to main content
15,663,872 members
Articles / Web Development / CSS
Posted 8 Aug 2011


50 bookmarked

Delete Functionality in GridView with Confirmation Using jQuery UI Dialog

Rate me:
Please Sign up or sign in to vote.
4.56/5 (10 votes)
9 Aug 2011CPOL2 min read
You're using a GridView web control to list records from a particular data source and you want a delete functionality for each row of data. A dialog must be presented to the user to confirm deletion. You also want to show a dialog to the user when an error occurs during deletion.


You're using a GridView web control to list records from a particular data source and you want a delete functionality for each row of data. A dialog must be presented to the user to confirm deletion. There's also a possibility of error when deleting a record from your data source and you want to show a dialog to the user when an error occurs during deletion.

The Solution

Minor details: This example uses the (Microsoft) Northwind database's Product table. The GridView web control gets the data via an ObjectDataSource web control. The ObjectDataSource gets the data (SelectMethod) through a strongly-typed middle-tier object which encapsulates a data-tier object that calls on a Stored Procedure. You don't have to use an ObjectDataSource control to delete an item in your data source, you could also use a SQLDataSource, etc.

  1. Initialize the jQuery UI Dialog plug-in.
  2. JavaScript
    $(function () {
    function InitializeDeleteConfirmation() {
            autoOpen: false,
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete": function () {
                Cancel: function () {
  3. Add a TemplateField in the GridView. Inside the template field, add an ImageButton.
  4. ASP.NET
       <ItemStyle Width="30px" HorizontalAlign="Center" />
             <asp:ImageButton ID="IBtnDelete" runat="server" ToolTip="Click to delete"
            CommandArgument='<%# Eval("ProductID") %>'
            OnClientClick="javascript:return deleteItem(, this.alt);"
            ImageUrl="~/Images/Delete.png" AlternateText='<%# Eval("ProductID") %>'
            CommandName="Delete" />

    The code above passes the product ID via the ImageButton's AlternateText property. When the button is clicked, it will call a client-side JavaScript function called deleteItem. The deleteItem function shows the dialog box to the user. See snapshot and code below.

    function deleteItem(uniqueID, itemID) {
        var dialogTitle = 'Permanently Delete Item ' + itemID + '?';
        $("#deleteConfirmationDialog").html('<p><span class="ui-icon " + 
          "ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + 
          "Please click delete to confirm deletion.</p>');
            title: dialogTitle,
            buttons: {
                "Delete": function () { __doPostBack(uniqueID, ''); 
                          $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
        return false;

    When the delete button in the dialog is clicked, a postback is performed and then the dialog box is closed. Otherwise the dialog is just closed without further actions. When post back occurs by clicking the delete ImageButton, the GridView sends a Delete command (CommandName="Delete") along with the product ID (CommandArgument='<%# Eval("ProductID") %>') value to the ObjectDataSource control.

  5. The ObjectDataSource will look for a static method (C#) (shared function in VB.NET) called Delete that takes a parameter called ProductID. The function or method is located in the Northwind.BusinessObject.Products object. This will delete the specific record.
  6. ASP.NET
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
        SelectMethod="SelectAll" SortParameterName="sortExpression"
        DeleteMethod="Delete" ondeleted="ObjectDataSource1_Deleted">
            <asp:Parameter Name="ProductID" Type="Int32" />

    Here's a sample Delete function:

    public static void Delete(int productID) 
  7. After the ObjectDataSource calls the Deleted method, the ondeleted event fires. We can check for any errors here during item deletion. Code snippets are shown below.
  8. C#
    protected void ObjectDataSource1_Deleted(object sender, 
              System.Web.UI.WebControls.ObjectDataSourceStatusEventArgs e)
        Functions.ObjectDataSourceDeleted(sender, e, this.Page);
    public static void ObjectDataSourceDeleted(object sender, 
           System.Web.UI.WebControls.ObjectDataSourceStatusEventArgs e, Page page)
        if (e.Exception != null)
            // show delete error
            string errorMessage = 
            ScriptManager.RegisterStartupScript(page, page.GetType(), "err_msg", 
                 "ShowError('" + errorMessage + "');", true);
            e.ExceptionHandled = true;

    When an error occurs, we call a JavaScript function called ShowError passing the errorMessage. See snapshot below. Note: We remove special characters so that our client-side script won't break.

    function ShowError(errorMessage) {
        $(document).ready(function () {
                modal: true,
                buttons: {
                    Ok: function () {

Last Words

To run the code download, make sure to download and install Microsoft's Northwind database. Also make sure to change the user name and password on the Dbase.cs (Dbase.vb) class file found in the App_Code folder, under the Helper folder. The code for download is a modified version of the generated web form by AspxFormsGen 4.0.

The original article can be found here.


Click here to see the demo.

As always, the code and the article are provided "As Is", there is absolutely no warranties. Use at your own risk.

Happy coding!!!


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

Written By
Web Developer
United States United States

Comments and Discussions

QuestionI am facing a problem that Linkbutton is not rendered with name attrib Pin
saket rohilla31-Oct-14 9:13
saket rohilla31-Oct-14 9:13 
QuestionFunctions does not exist Pin
todomable20-Oct-13 4:56
todomable20-Oct-13 4:56 
AnswerRe: Functions does not exist Pin
JOE Heart Under Blade3-Jan-14 15:56
JOE Heart Under Blade3-Jan-14 15:56 
QuestionGood One Pin
demouser7434-Apr-12 2:12
demouser7434-Apr-12 2:12 
GeneralMy vote of 5 Pin
Debapriya Sahoo9-Aug-11 20:26
Debapriya Sahoo9-Aug-11 20:26 

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

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