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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <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() {
                        $(this).remove();
                    });
                }
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grdStudent" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>


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();
            grdStudent.DataBind();
          
        }
    }
}
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