Gridview and Jquery Confirm

In this post i am going to show you how to add pop-up (confirm)  window that ask user to confirm if they want to delete this row or not.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewConfirm.aspx.cs"
    Inherits="GridViewConfirm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            //To remove the row on click on click of the row
            $("#<%=grdStudent.ClientID%> tr").click(function() {
                //Get confirmation from the user
                var answer = confirm('Are you sure you want to delete->' + $(this).find("td:first").html());
                //if answer is true remove the row(here you can remove row from database)
                if (answer) {
                    //Change the backgroupd color while removing the GridView row and fade out feel to the user
                    $(this).css("background-color", "green");
                    $(this).fadeOut(500, function() {

    <form id="form1" runat="server">
        <asp:GridView ID="grdStudent" runat="server">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridViewConfirm: System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            grdStudent.DataSource = new Student().GetAll();
public class Student
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public List<Student> GetAll()
        List<Student> list = new List<Student>()
            new Student{FirstName="S001",LastName="L01",Age=21},
            new Student{FirstName="S002",LastName="L21",Age=31},
            new Student{FirstName="S003",LastName="L341",Age=51},
            new Student{FirstName="S004",LastName="L021",Age=51},
            new Student{FirstName="S005",LastName="L0231",Age=45},
            new Student{FirstName="S006",LastName="L0231",Age=26},
            new Student{FirstName="S007",LastName="L021",Age=14},
            new Student{FirstName="S008",LastName="L5401",Age=21},
            new Student{FirstName="S009",LastName="L231",Age=21},
            new Student{FirstName="S009",LastName="L0231",Age=21},
            new Student{FirstName="S011",LastName="L0231",Age=21},


        return list;
click here to see the  {{Demo}}

No comments:

Post a Comment