Gridview header issue: call event on header

Question

Now I got this gridview, And I need the headers to be clickable, whereafter an event starts (something like OnClickHeader="header_ClickEvent"?) Ofcourse there is a SortExpression element, which enables to sort the grid, but I want to be able to start any event, like when clicking a button.

I could not find any solution within the asp:BoundField nor asp:TemplateField... I thought a hyperlink could solve the problem, but that was a bit premature. Also, when using a TemplateField, I find it very hard to fill the column with data. Could anyone bring me the solution?

The Gridview:

<asp:GridView CssClass="gridview" ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Student_key" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" PagerSettings-Visible="false" PageSize="14">

                                    <HeaderStyle CssClass="headerstyle" />
                                    <RowStyle CssClass="rowstyle"/>
                                    <AlternatingRowStyle CssClass="altrowstyle" />
                                    <Columns>
                                        <asp:BoundField DataField="Studentnumber" HeaderText="Studentnummer" >
                                            <HeaderStyle CssClass="header100" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="Prefix" HeaderText="Voorletters" >
                                            <HeaderStyle CssClass="header75" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="prename" HeaderText="Voornaam" SortExpression="Voornaam">
                                            <HeaderStyle CssClass="header75" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="nickname" HeaderText="Roepnaam" >
                                            <HeaderStyle CssClass="header100" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="insertion" HeaderText="Tussenvoegsel" >
                                            <HeaderStyle CssClass="header100" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="surname" HeaderText="Achternaam">
                                            <HeaderStyle CssClass="header100" />
                                        </asp:BoundField>
                                        <asp:CommandField SelectText="show results" ShowSelectButton="True" >
                                            <HeaderStyle CssClass="header100" />
                                        </asp:CommandField>

                                    </Columns>
                                    <EmptyDataTemplate >There are no results shown, please try again.</EmptyDataTemplate>

                                </asp:GridView>

Answer 1

This is old code mind you. It can be optimized.

http://weblogs.asp.net/rajbk/archive/2006/08/04/Clickable-GridView-Headers.aspx

Answer 2

Funny, I had the same problem today, and, like you, I found the above solution a bit much.

Here's something that I'm happy with.

First, you need to use the CSS Friendly Control adapters. There are a lot of other benefits to this if you're using a GridView and you have any class whatsoever. It is needed in this case because it adds the necessary classes to your header based on sorting properties, which ASP.NET does not.

You don't need to change any of your code to add the adapters, just drop their DLL in your bin folder, and their .browser file in your App_Browsers folder (which you may need to add for this purpose).

(On a side node, I actually found that the adapters broke some of my other control layouts (which were styled against the default ASP.NET markup), so I ripped out all the adapter tags except the one for GridView.)

<browser refID="Default">
    <controlAdapters>
        <adapter controlType="System.Web.UI.WebControls.GridView"
                 adapterType="CSSFriendly.GridViewAdapter" />
    </controlAdapters>
</browser>

Now, to get to the good part. This bit of jQuery in your document.ready event will have the desired effect.

// Make the entire column header clickable, not just the text
$('#your-table thead th.sortable').each( function() {
    var href = $('a', this).attr('href');
    $(this).click( new Function(href.replace(/^javascript:/, '')) );
    $('a', this).attr('href', 'javascript: return false;');
});

Basically, it strips the javascript out of the link that ASP.NET places in the header, which looks like this

<a href="javascript:__doPostBack('ctl00$Form$id','Sort$Quantity')">Qty</a>

and puts the code into the header's click event. Then it disables the link, so that the event bubbling does not cause a conflict.

Of course, you'll need to add style rules to give the desired visual cues.

This solution degrades well, since those mythical non-javascript browsers will simply exhibit the default behavior (where you have to click on the header text).

Hope this works for you!

EDIT: I just realized that I hadn't read your question very carefully the first time. My code was designed to get the default sorting behavior when you click anywhere in the header (not just the link text). But I guess this was close enough :)

By the way, to get data into a template field similar to what ASP.NET would put there, you just add

<ItemTemplate>
    <%# Eval("FieldName") %>
</ItemTemplate>

See the documentation on formatting, etc.