How to put a button in a header of ASP.NET gridview?

Question

Hi, All I want to do is to put an asp:button in the header of a gridview. Let's say you have a grid view with 3 columns - id, name, family. So, instead of a header [id, name, family] i want it to be [id, name, asp:button] - so the button will have it's action of course.

Thanks, Roman.

Answer 1

these are in fact LinkButtons. you can use css to give them the look and feel of a real button.

however, it would be hardly elegant, whereas the trend in design is in fact use links instead of buttons (look at any popular web app you love, inc. this one)

Answer 2

The approach you'll need to take is to make that desired GridView column a template field. When you use template fields you can stick any asp.net controls into each main section of the gridview control (header, item, footer, etc). I haven't tested this but in principal it looks like this:

        <asp:GridView ID="Gridview1" runat="server">
        <Columns>
            <asp:BoundField DataField="yourDbColumnName" HeaderText="id" />
            <asp:BoundField DataField="yourDbColumnName" HeaderText="name" />
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:Button runat="server" ID="btnFamily" CommandName="FamilyClicked" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Literal runat="server" ID="litFamily" Text='<%# EVAL("YourDbColumnValue") %>'></asp:Literal>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

To "capture" your button's click event and do something with it you need to utilize the GridView's RowCommand event (here's a starting point - again untested):

    Protected Sub Gridview1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Gridview1.RowCommand
    If e.CommandName = "FamilyClicked" Then
        ' they clicked by grid view header's asp:button control...
        Response.Write("TEST")
    End If
End Sub

The magic here is in the assignment of your button's CommandName property (in this case I set it to "FamilyClicked" but it can be anything you want).

Here is some more fundamentals on the Template Field technology the GridView uses - link text

Hope that helps.