如何通过点击gridview header呼叫javascript function？

Question

I have a gridview and I am trying to make it so whenever someone clicks on the header text it will call a javascript function.

Here is my gridview code

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid"
        DataKeyNames="ID" >
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%#Eval("ID") %>' />



                </ItemTemplate>
            </asp:TemplateField>

                                <asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />

        </Columns>
            <RowStyle  />
        <FooterStyle/>


        <SelectedRowStyle />
        <HeaderStyle />
    </asp:GridView>

Can someone point me in the right direction?

Answer 1

Okay, If you want to bind a jquery or javascript event to your GridView Header, Simply add a class to your GridView HeaderStyles and bind it with a click event. Do as follows:

<HeaderStyle CssClass="GridViewHeaderRow"  />

Then in your jquery or javascript , get the reference of this element using the class you added and bind a whatever event you want, See:

<script>
    $(document).ready(function () {
        $('.GridViewRow').on('click', function () {
            alert('clicked');
            // Do whatever you want to do.
        });
    });
</script>

A full example merged in your code would be like this:

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ID">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
        <asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
    </Columns>
    <RowStyle />
    <FooterStyle />
    <SelectedRowStyle />
    <!-- Add the class here in your HeaderStyles -->
    <HeaderStyle CssClass="GridViewHeaderRow"  />
</asp:GridView>

<script>
    $(document).ready(function () {
        $('.GridViewRow').on('click', function () {
            alert('clicked');
            // Do whatever you want to do.
        });
    });
</script>