Delete Gridview Row with Jquery

Question

<asp:CommandField ShowDeleteButton="True" />

How can I link a simple jquery method to the delete button which just asks for user confirmation and returns (true or false) if user is sure he want to delete record in gridview or not?

Answer 1

You capture the delete buttons for that grid view, and add a confirmation. Also you take care to not overwrite the existing command.

jQuery(document).ready(function() 
{
  // note: the `Delete` is case sensitive and is the title of the button
  var DeleteButtons = jQuery('#<%= GridViewName.ClientID %> :button[value=Delete]');
  DeleteButtons.each(function () {
    var onclick = jQuery(this).attr('onclick');
    jQuery(this).attr('onclick', null).click(function () {
        if (confirm("Delete this record? This action cannot be undone...")) {
            return onclick();
        }
        else
        {
            return false;
        }
    });
  });   
});   

If you place the GridView inside an UpdatePanel then you need to use the pageLoad() for the update (Ver 4+) as:

function pageLoad()
{
      var DeleteButtons = jQuery('#<%= GridViewName.ClientID %> :button[value=Delete]');
      DeleteButtons.each(function () {
        var onclick = jQuery(this).attr('onclick');
        jQuery(this).attr('onclick', null).click(function () {
            if (confirm("Delete this record? This action cannot be undone...")) {
                return onclick();
            }
            else
            {
                return false;
            }
        });
      });   
}

the pageLoad() is run on page load, but also on each ajax update from the UpdatePanel.