Display ASP.Net GridView Selected Row in HTML DIV when CheckBox is Checked using jQuery

puneet20...

SOLVED CLOSED ACTIVE ANSWERED
User: puneet2012
Posted: on Jul 24, 2012 02:50 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 5518

I have a gridview with 5 columns , i am bind gridview on pageload .... each row of gridview has a checkbox aslo ..... and i have a hyperlink outside the gridview..

I want that when i check checkbox of particular row the 'Firstname' field of that row should display as link , i am using jquery to avoid postback .. but not able to get that field value as link.

here is my gridview code:

<asp:GridView ID="GridView1" runat="server" 
AutoGenerateColumns="False" DataKeyNames="EmployeeID">

    <Columns>

        <asp:TemplateField HeaderText="Name" 
SortExpression="FirstName">

    <ItemTemplate>
    <asp:CheckBox ID="CheckBox1" runat="server" Enabled="true" />
                <asp:Label ID="Label1" runat="server" 
Text='<%# Bind("FirstName") %>'></asp:Label>

                <asp:Label ID="Label2" runat="server" 
Text='<%# Eval("LastName") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField="Title" HeaderText="Title" 
SortExpression="Title" />

        <asp:BoundField DataField="HireDate" HeaderText="HireDate" 
SortExpression="HireDate" />

    </Columns>

</asp:GridView>

Mudassar

0 7

Reply
ANSWER
User: Mudassar
Replied: on Jul 24, 2012 05:48 PM
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")) {
                    $("#selected").append($("td", $(this).closest("tr")).eq(1).html() + "<br />");
                }
            });
        });
    </script>
</head>
<body style="font-family: Arial; font-size: 10pt">
    <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" HeaderText="Name" />
        </Columns>
    </asp:GridView>
    <br />Selected Rows
    <div id = "selected"></div>
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Name")});
        dt.Rows.Add("John");
        dt.Rows.Add("Sam");
        dt.Rows.Add("Mike");
        dt.Rows.Add("Jerry");
        dt.Rows.Add("Thomas");
        GridView1.DataSource = dt;
        GridView1.DataBind();
}

Display ASP.Net GridView Selected Row in HTML DIV when CheckBox is Checked using jQuery

Company

Explore

Follow us

Contact Us