How to Delete Row in GridView using JQuery in ASP.NET

No.of Views3860
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  20 Jul 2011 20:07:30
Tag : ASP.NET , Grid Controls
In this codesnippet, i will show How to Delete Row in GridView using JQuery in ASP.NET.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

The purpose of the codesnippets is delete a row with data or without(empty) in gridview using JQuery. As per we know Jquery is powerful library to manipulate client html,css and etc with less lines number of codes.
In this part, just I have added code to delete row, when user click delete image in last column in the gridview.

Code

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

<!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>How to Delete Row in GridView using JQuery in ASP.NET</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           
            // if you are click a delete image, then it will delete entire row of the clicked image
            $('table td img.delete').click(function() {
                $(this).parent().parent().remove();
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvData" runat="server">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Image ImageUrl="" AlternateText="delete" runat="server" ID="delete" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

That's all, just run and click delete image to delete a row.Hope helps and thank you

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
    This CodeSnippet can be used to add and handle the checkboxes in GridView
    Published Date : 14/Feb/2011
    this codesnippet is very tricky because it shows a trick about exporting datalist data to excel.
    Published Date : 09/Jun/2010
    In many situations we may need to add auto number or serial numbers in grid view column, but we cannot find a property in property window to add this.
    Published Date : 26/May/2010
    In this article I am going to give you a brief explanation regarding how to use a Radio button in grid view. Actually I am going to show how we can delete a row from grid view by selecting the radio button inside the grid view and by clicking on delete button outside the grid view
    Published Date : 15/May/2010
    In this snippet, I will show how to format a cell and apply style in gridview using JQuery. Sometimes we may need to apply the format for a particular cell based on the cell value; it can be done in within DataRowBound event in asp.net.
    Published Date : 05/Jan/2011
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</