How to call JavaScript function in GridView Command Field?

Question

I have return one Javascript function which asks the confirm message to the user. The JavaScript functions is

    function ConfirmOnDelete() {
    if (confirm("Are you sure to delete?"))
        return true;
    else
        return false;

and GridView is like below:

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />

Here I want to call the JavaScript function when user clicking the Delete in the GridView Command Field. How to call this?

Answer 1

Assuming you want to keep using your CommandField , you could do this programmatically using your GridView's OnRowDataBound event.

Specify the event handler for the RowDataBound event in your GridView declaration:

<asp:GridView ID="gv" runat="server" OnRowDataBound="gv_RowDataBound"....

Then in your event handler (code-behind) find your button (here I'm assuming ImageButton , though this depends on your ButtonType property in your CommandField ) and add JavaScript to its OnClientClick property.

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ((ImageButton)e.Row.Cells[cell].Controls[ctrl]).OnClientClick = "return confirm('Are you sure you want to delete?');"; // add any JS you want here
    }
}

In the above example, cell refers to the column index of your CommandField and ctrl refers to the control index (Delete button) within the cell you're referencing.

Answer 2

You better avoid ask the confirmation for deletion on the server side, capture the user final decision using javascript then go to the server side to execute your logic. CommandField will not be the best solution here.

JS:

<script type="text/javascript">
    function DeleteConfirm() {

        if (confirm("Are you sure you want to delete this customer from excluded customer list ?")) {
            return true;
        }
        return false;
    }
</script>

HTML:

            <asp:TemplateField HeaderText=" ">
                <ItemTemplate>
                    <asp:LinkButton ID="lnk_RemoveFromlist" runat="server" Text="Delete"
                        CommandName="Delete" OnCommand="Delete_Command" CommandArgument='<%# Eval("ID").ToString()' OnClientClick='return DeleteConfirm()'></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>

Code:

protected void Remove_Command(object sender, CommandEventArgs e)
{
    //Implement your Delete Logic
}

Answer 3

for cancel button have command name as "cancel" and for delete button "delete" , check

if(e.CommandName == "delete")
 {
   //script to delete();
 }
else if(e.commandName == "cancel")
 {
   //close with some script;
 }

To call javascript function in codebehind,

Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function","loadPopupBox();", true);

Answer 4

In general you have to specify OnClientClick="return confirm('Are you sure you want to delete ?');" but that doesn't work with CommandField better use TemplateField , this explains better http://davesquared.net/2007/10/confirm-delete-for-gridview.html

Answer 5

您可以使用按钮的OnClientclick事件来调用该函数。例如

<asp:button id="btndelete" runat="server" Text="delete" Onclientclick="if(!ConfirmOnDelete())return false;"/>

Answer 6

use start up script

    ScriptManager.RegisterStartupScript(Page, this.GetType(), "ConfirmOnDelete", "ConfirmOnDelete();", true);

or you can also use onclientclick as well

Answer 7

HTML:

<asp:GridView ID="GridView1" runat="server" OnRowDeleting="gv1_RowDeleting">
   <Columns>
       <asp:TemplateField HeaderText="Delete">
          <ItemTemplate>
                   <asp:CommandField ShowDeleteButton="true" HeaderText="delete" />  
          </ItemTemplate>
       </asp:TemplateField>
   </Columns>
</asp:GridView>

CODE:

    protected void gv1_RowDeleting (object sender, GridViewDeleteEventArgs e) 
{

    GridView1.Attributes.Add("OnClick", "return confirm('Really wanna delete?');");

       // implement your delete logic

    Response.Write("<script>alert("Delete Successful");</script>");

}

This will Call Javascript function when we will click on "Delete" Command Field in Gridview and Response.write function will give an alert that data has been deleted. You can add whwtever function you want to execute in this function.