Click here to Skip to main content
15,884,353 members
Articles / Web Development / CSS

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 58.2K   3.2K   50  
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.
loadJavaScriptFile("Scripts/jquery-1.4.1.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.core.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.widget.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.mouse.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.button.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.draggable.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.resizable.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.position.min.js");
loadJavaScriptFile("Scripts/UI/minified/jquery.ui.dialog.min.js");
loadJavaScriptFile("Scripts/jquery.metadata.min.js");

function loadJavaScriptFile(jspath) {
    document.write('<script type="text/javascript" src="' + jspath + '"><\/script>');
}

function InitializeDeleteConfirmation() {
    $('#deleteConfirmationDialog').dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Delete": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
}

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>');

    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
            "Delete": function () { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

    $('#deleteConfirmationDialog').dialog('open');
    return false;
}

function ShowError(errorMessage) {
    $(document).ready(function () {
        $("#deleteErrorDialog").text(errorMessage);
        $("#deleteErrorDialog").dialog({
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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
None.

Comments and Discussions