Question

I’m using a gridview with checkboxes and i need to create a table row out of it on checking any of the checkboxes in the gridview. I need help to get the selected row of the gridview using javascript.

GridView Source Code

<asp:GridView ID="GrdCustomer" runat="server" BorderColor="#999999" CellPadding="3"
        ForeColor="Black" GridLines="Vertical" Width="640px" AllowPaging="True" AutoGenerateColumns="False"
        OnRowDataBound="GrdCustomer_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="Select" ItemStyle-Width="50px">
                <ItemTemplate>
                    <input id="selector" onclick="javascript:bindToList(this);selectCustomers();" runat="server" type="checkbox" />
                </ItemTemplate>
                <HeaderTemplate>
                    <input id="selector" onclick="javascript:SelectDeselectAllCheckboxes(this);selectCustomers(); " runat="server"
                        type="checkbox" />
                </HeaderTemplate>
                <ItemStyle Width="50px" HorizontalAlign="Center"></ItemStyle>
            </asp:TemplateField>
            <asp:BoundField DataField="Salutation" HeaderText="Salutation">
                <ItemStyle HorizontalAlign="Center" />
            </asp:BoundField>
            <asp:BoundField DataField="Name" HeaderText="Client Name">
                <ItemStyle HorizontalAlign="Center" />
            </asp:BoundField>
            <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Email">
                <ItemStyle HorizontalAlign="Center" />
            </asp:BoundField>
            <asp:BoundField DataField="Title" HeaderText="Title">
                <ItemStyle HorizontalAlign="Center" />
            </asp:BoundField>
            <asp:BoundField DataField="Id" HeaderText="Id" />
        </Columns>
        <FooterStyle BackColor="#CCCCCC" />
        <PagerStyle BackColor="#999999" ForeColor="Black" />
        <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle BackColor="#CCCCCC" />
    </asp:GridView>

Basic script being called on checkbox check state (only started)

 function selectCustomers() {
        alert("Hey I'm over here!!!");
    }

Answer 1

I didn’t tried it on a gridview but you can select the ‘tr’ element by using the parentNode property of an element in JS. The ‘tr’ is probably your selected row.

eg.

On the click of check box use the following code,

onclick="javascript:selectCustomers(this);"

Then in the function,

function selectCustomers(chkbox) {
       var desiredparentelement = chkbox.parentNode.parentNode; // Use parent property to get tr
    }

Inspect your html element to know how many parents the check box have. Use Mozilla or Chrome tools for inspecting elements.