Insert and Remove Checked ASP.Net GridView Rows in DIV using jQuery

puneet20...

SOLVED CLOSED ACTIVE ANSWERED
User: puneet2012
Posted: on Jul 26, 2012 02:32 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4639

there is code had been provided by for display checked items of gridview as a HTML outside gridview

i have modified it a little now the checked item displays as a HTML Link .. i have added a span tag with sign 'X' and i want on click of that sign the corresponding row get remove .. i try to solve it but on click on 'x' All item get removed, instead of single row

<script type = "text/javascript">
        $("[id*=CheckBox1]").live("click", function() {
            $("#selected").empty();
            $("[id*=GridView1] [id*=CheckBox1]").each(function() {
                if ($(this).is(":checked")) {
                    var link = $("td", $(this).closest("tr")).eq(1).html();
                    $("#selected").append("<a  id='xy' href='" + link + "' >" + link + " </a>" +
                     "<span class='remov'>x</span>" + "<br/>");
                    }
            });
        });
      
            </script>

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
    </asp:GridView>
    <br />Selected Rows
    <div id = "selected">
    
    </div>
 
Output is like this :

Selected Rows
John x
Sam x
Mike x
Jerry x
Thomas x

i want on click 'x' , the corresponding name get remove.

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 3

Reply
ANSWER
User: Mudassar
Replied: on Jul 29, 2012 01:07 AM
Report

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $("[id*=CheckBox1]").live("click", function () {
            $("#selected").empty();
            $("[id*=GridView1] [id*=CheckBox1]").each(function () {
                if ($(this).is(":checked")) {
                    var link = $("td", $(this).closest("tr")).eq(1).html();
                    $("#selected").append("<a  id='xy' href='" + link + "' >" + link + " </a>" + "<a class='remov' style = 'cursor:pointer'>x</a>" + "<br />");
                }
            });
        });
        $('#selected .remov').live("click", function () {
            var name = jQuery.trim ($(this).prev().html());
            $(this).prev().remove();
            $(this).remove();
            var row = $("[id*=GridView1] .name:contains('" + name + "')").closest("tr");
            $("input[type=checkbox]", row).removeAttr("checked");
        }); 

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Name" ItemStyle-CssClass = "name" HeaderText="Name" />
        </Columns>
    </asp:GridView>
    <br />
    Selected Rows
    <div id="selected">
    </div>
    </form>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Insert and Remove Checked ASP.Net GridView Rows in DIV using jQuery

Company

Explore

Follow us

Contact Us