Saturday, February 18

Delete row from GridView and Database using JQuery in

Delete row or records from GridView and Database using JQuery in


As we know JQuery can be seen as an alternate of ajax hence we can do some operation in GridView using JQuery like deleting the records or row from GridView is much easier.
As we all know that GridView is render in the client browser as HTML mark up tag like table <TABLE>, <TR> as GridView row and <TD> as GridView cell. Actually in this article we will remove the <TR> that means entire row from gridview.
We are going to use css to recognize the <tr> as GridView row and using JQuery we are going to remove the tag which means use will get a feel that on click of delete image or button
In this article we are not going to use Update panel but using JQuery it will give similar feel mean without page postback delete the records.
Other Articles on JQuery:
you can find the other articles on JQuery to call server side function here
To Check the username availability live using JQuery you can visit this article
To Perform various validation in application using JQuery you can visit this post.
1st create user table with below columns in sql server database

Craete SQL Server Table

CREATE TABLE [dbo].[User_Table](

 [Id] [int] NOT NULL,

 [User_Name] [varchar](30) NOT NULL,

 [First_Name] [varchar](50) NOT NULL,

 [Last_Name] [varchar](50) NOT NULL,

 [Middle_Name] [varchar](50) NOT NULL,

 [Email_Id] [varchar](70) NOT NULL


You can add some records manually in the newly created table
Now lets create 2 stored procedure one to fetch records from database and display to GridView and other one is for deleting the records from database table.
This sp is for Fetching Records from User_Table

Craete Stored Proceure

CREATE PROCEDURE [dbo].[GetUserRecords]



 SELECT * FROM dbo.User_Table

and this stored procedure one is for Deleting records

CREATE PROCEDURE [dbo].[DeleteUser](@id int)



 DELETE FROM dbo.User_Table WHERE id = @id


Now Drag and Drop the GridView from the toolbox of the visual studio and place into the web form and depending upon the your requirement you can set the autogenerated column to false and Bound column or template column, Its totally up to you and your requirement.
In the below example I have taken 6 bound column and one template column for delete hyperlink and image button

GridView in .aspx page

<asp:GridView CellPadding="5" CellSpacing="5" ID="GridView1" runat="server" RowStyle-CssClass="record" AutoGenerateColumns="False" >

        <RowStyle CssClass="record"></RowStyle>


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

             <asp:BoundField DataField="User_Name" HeaderText="User Name" />

             <asp:BoundField DataField="First_Name" HeaderText="First Name" />

             <asp:BoundField DataField="Middle_Name" HeaderText="Middle Name" />

               <asp:BoundField DataField="Last_Name" HeaderText="Last Name" />

              <asp:BoundField DataField="Email_Id" HeaderText="Email Id" />



                     <a href="#" id='<%# Eval("ID") %>' class="delbutton"> <img  border="0" src="Images/delete.jpg" alt="Delete" /></a>





In the above GridView code I have used <RowStyle CssClass="record"></RowStyle> to set the class to record and its important to delete row using JQuery
In the above declaration of GridView I also used anchor tag and set its class to delbutton and its id value to the  correspondent to the database id column so that we can get the record id in JQuery function.
Now assign the data to the gridView in the page load event

protected void Page_Load(object sender, EventArgs e)


    if (!IsPostBack)





 and here is the LoadData function which will get the data from SQL Server using Stored Procedure and bind to GridView

private void LoadData()


        //Get the connection string from the web.config file

        string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

        SqlConnection sqlConn = new SqlConnection(conString);



            SqlCommand sqlCmd = new SqlCommand("GetUserRecords", sqlConn);

            sqlCmd.CommandType = CommandType.StoredProcedure;


            SqlDataReader rdr = sqlCmd.ExecuteReader();

            //assign datareader to GridView you can assign to any datasource for e.g DataTable or dataSet

            GridView1.DataSource = rdr;


           //Close DataReader





            //Handle Error if any occurred




            //Close Database connection




Once you bind the data into grridview you will see this
And Below is the code which is used to delete records from database and will be called using Jquery. Don't forget to add  [System.Web.Services.WebMethod] like this

public static void DeleteUser(string args) 
string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString; 
SqlConnection sqlConn = new SqlConnection(conString); 
SqlCommand sqlCmd = new SqlCommand("DeleteUser", sqlConn); 
sqlCmd.CommandType = CommandType.StoredProcedure; 
sqlCmd.Parameters.AddWithValue("@id", Convert.ToInt32(args.Trim())); 
catch  { 
//Handle Exception 
Now Here is the JQuery code sample

JQuery Delete function

<head runat="server">

    <title>GridView and JQuery</title>

    <script src="Script/jquery-1.4.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {

             $("#.delbutton").click(function() {

                 //Get the Id of the record to delete

                 var record_id = $(this).attr("id");

                 //Get the GridView Row reference

                 var tr_id = $(this).parents("#.record");

                 // Ask user's confirmation before delete records

                 if (confirm("Do you want to delete this record?")) {


                         type: "POST",

                         //GridViewDelete.aspx is the page name and DeleteUser is the server side method to delete records in GridViewDelete.aspx.cs

                         url: "GridViewDelete.aspx/DeleteUser",

                         //Pass the selected record id

                         data: "{'args': '" + record_id + "'}",

                         contentType: "application/json; charset=utf-8",

                         dataType: "json",

                         success: function() {

                             // Change the back color of the Row before deleting

                             tr_id.css("background-color", "lightgreen");

                             // Do some animation effect

                             tr_id.fadeOut(500, function() {

                                 //Remove GridView row






                 return false;





If you wun the application and click on any delete image it will ask the confirmation like below image and if you say yes it will delete the omage from the UI and Database
Hope this will help all. You can also donwload the sample application by licking the below download link
Thanks shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

shibashish mohanty