Delete ASP.Net GridView Row with JavaScript Confirmation Box using CommandField and OnRowDeleting event

HTML Markup

Below is the HTML Markup of the APS.Net GridView. Here I am making use the CommandFieldand OnRowDeleting event to delete the GridView Row. Hence I will apply the JavaScript Confirmation Box to the CommandFieldDelete Button itself.

<asp:GridView ID="GridView1" CssClass = "Grid" runat="server" OnRowDeleting="OnRowDeleting" AutoGenerateColumns = "false" OnRowDataBound = "OnRowDataBound">

    <Columns>

        <asp:BoundField DataField="Item" HeaderText="Item" />

        <asp:BoundField DataField="Price" HeaderText="Price" />

        <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />

    </Columns>

</asp:GridView>

Binding the GridView

In this example I am binding the APS.Net GridView with dummy data using DataTable.

C#

protected void Page_Load(object sender, EventArgs e)

{

    if (!Page.IsPostBack)

    {

        DataTable dt = new DataTable();

        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });

        dt.Rows.Add("Shirt", 450);

        dt.Rows.Add("Jeans", 3200);

        dt.Rows.Add("Trousers", 1900);

        dt.Rows.Add("Tie", 185);

        dt.Rows.Add("Cap", 100);

        dt.Rows.Add("Hat", 120);

        dt.Rows.Add("Scarf", 290);

        dt.Rows.Add("Belt", 150);

        ViewState["dt"] = dt;

        BindGrid();

    }

}

protected void BindGrid()

{

    GridView1.DataSource = ViewState["dt"] as DataTable;

    GridView1.DataBind();

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    If Not Page.IsPostBack Then

        Dim dt As New DataTable()

        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Item"), New DataColumn("Price")})

        dt.Rows.Add("Shirt", 450)

        dt.Rows.Add("Jeans", 3200)

        dt.Rows.Add("Trousers", 1900)

        dt.Rows.Add("Tie", 185)

        dt.Rows.Add("Cap", 100)

        dt.Rows.Add("Hat", 120)

        dt.Rows.Add("Scarf", 290)

        dt.Rows.Add("Belt", 150)

        ViewState("dt") = dt

        BindGrid()

    End If

End Sub

Protected Sub BindGrid()

    GridView1.DataSource = TryCast(ViewState("dt"), DataTable)

    GridView1.DataBind()

End Sub

Applying the JavaScript Confirmation Box to the GridView CommandField Delete Button

To apply the JavaScript Confirmation Box, I am looking for the Button in the Controls of the GridView Cell Index 2 since it has the CommandField. Once

C#

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

        string item = e.Row.Cells[0].Text;

        foreach (Button button in e.Row.Cells[2].Controls.OfType<Button>())

        {

            if (button.CommandName == "Delete")

            {

                button.Attributes["onclick"] = "if(!confirm('Do you want to delete " + item + "?')){ return false; };";

            }

        }

    }

}

VB.Net

Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim item As String = e.Row.Cells(0).Text

        For Each button As Button In e.Row.Cells(2).Controls.OfType(Of Button)()

            If button.CommandName = "Delete" Then

                button.Attributes("onclick") = "if(!confirm('Do you want to delete " + item + "?')){ return false; };"

            End If

        Next

    End If

End Sub

Delete the ASP.Net GridView Row using CommandField and OnRowDeleting event

Below is the code to delete the ASP.Net GridView Row using OnRowDeleting event

C#

protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)

{

    int index = Convert.ToInt32(e.RowIndex);

    DataTable dt = ViewState["dt"] as DataTable;

    dt.Rows[index].Delete();

    ViewState["dt"] = dt;

    BindGrid();

}

VB.Net

Protected Sub OnRowDeleting(sender As Object, e As GridViewDeleteEventArgs)

    Dim index As Integer = Convert.ToInt32(e.RowIndex)

    Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)

    dt.Rows(index).Delete()

    ViewState("dt") = dt

    BindGrid()

End Sub