ASP.NET Gridview delete row only on confirmation

Question

I have a gridview with the onRowDeleting method implemented. I would like to prompt the user with a pop up message to confirm whether they wish to delete this item or not. If the user clicks "OK", "Confirm" or something similar then I would like the onRowsDeleting to be process and the record deleted. But if the user pressed "No" then I would like the method to be cancelled and the record not deleted.

How can this be done?

Here is my gridview and onRowDeleting method in the code behind.

<asp:GridView runat="server" ID="gvShowQuestionnaires" HeaderStyle-CssClass="table_header" CssClass="view" AlternatingRowStyle-CssClass="alt" AlternatingRowStyle-BackColor="#f3f4f8" AutoGenerateColumns="False" 
            DataKeyNames='QuestionnaireID' OnRowDeleting="gvShowQuestionnaires_RowDeleting" OnRowEditing="gvShowQuestionnaires_RowEdit" OnSelectedIndexChanged="gvShowQuestionnaires_SelectedIndexChanged" FooterStyle-CssClass="view_table_footer" > 
    <Columns>
         <asp:BoundField DataField="QuestionnaireID" HeaderText="ID" HeaderStyle-Width="80px" ItemStyle-CssClass="bo"></asp:BoundField>
         <asp:BoundField DataField="QuestionnaireName" HeaderText="Questionnaire Name" />                     
         <asp:ButtonField CommandName="select" ButtonType="Link" Text="view results" />
         <asp:CommandField HeaderText="Options" CausesValidation="true" ShowDeleteButton="True" ShowEditButton="true" EditText="Edit">
         </asp:CommandField>
     </Columns> 
</asp:GridView>

protected void gvShowQuestionnaires_RowDeleting(object sender, GridViewDeleteEventArgs e)
{       
    int questionnaireID = (int)gvShowQuestionnaires.DataKeys[Convert.ToInt32(e.RowIndex)].Value; 
    GetData.DeleteQuestionnaire(questionnaireID);
    gvShowQuestionnaires.DataSource = DT;
    gvShowQuestionnaires.DataBind();
    lblActivity.Visible = true;
    lblActivity.Text = "Your questionnaire has been deleted";
}

Answer 1

You should do that on clientside with javascript.

Therefore you can handle GridView's RowDataBound event to add this to the Delete-Button's OnClientClick:

protected void gvShowQuestionnaires_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // reference the Delete LinkButton
        LinkButton db = (LinkButton)e.Row.Cells[3].Controls[0];

        db.OnClientClick = "return confirm('Are you certain you want to delete this questionnaire?');";
    }
}

http://msdn.microsoft.com/en-us/library/bb428868.aspx

This js-function will return whether the user clicked ok or cancel. If a js-eventhandler returns false, the page will not postback to the server.

Answer 2

The "return confirm(..") Javascript is on the right track.

The problem is that ASP.NET will append js to call __doPostBack

so you'll get something like this in your HTML for the delete button:

OnClickClient="return confirm('Are you sure you want to delete this record?');";javascript:__doPostBack('ctl00$Main$PlansGrid','Delete$101')"

What happens is: 1) User clicks Delete button. 2) Confirm dialog displayed. 3) User clicks on OK button. 4) Confirm returns True. 5) return at beginning of statement executes and __doPostBack is not called.

The solution is to return only if confirm returns false:

OnClientClick="if(!confirm('Are you sure you want to delete this Plan?')) return;"

If user clicks OK confirm returns True and then __doPostBack executes.