Sort columns based on gridview double header

Question

I have a requirment where in i need to sort the columns of my gridview. But the catch is that i need to place an additional row below my gridview columns which would have ascending and descending sort images. When clicking on this images, sorting of the selected column should take place.

Please guide me!!

Let me know if you have any query/doubts

Thanks!

Answer 1

My decision:

<asp:GridView runat="server" ID="GridViewTest" DataSourceID="CustomersSource" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>         
            <HeaderTemplate>
                <asp:Panel runat="server" BorderWidth="1">
                    <asp:Label runat="server" Text='column {CustomerID}'></asp:Label>
                </asp:Panel>
                <asp:Panel runat="server">
                    <asp:ImageButton runat="server" AlternateText="asc" CommandName="CustomerID" CommandArgument="<%# CommandArgumentAsc %>" OnClick="ImageButton_Click" />
                    <asp:ImageButton runat="server" AlternateText="desc" CommandName="CustomerID" CommandArgument="<%# CommandArgumentDesc %>" OnClick="ImageButton_Click" />
                </asp:Panel>
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("CustomerID")%>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField>         
            <HeaderTemplate>
                <asp:Panel runat="server" BorderWidth="1">
                    <asp:Label runat="server" Text='column {CompanyName}'></asp:Label>
                </asp:Panel>
                <asp:Panel runat="server">
                    <asp:ImageButton runat="server" AlternateText="asc" CommandName="CompanyName" CommandArgument="<%# CommandArgumentAsc %>" OnClick="ImageButton_Click" />
                    <asp:ImageButton runat="server" AlternateText="desc" CommandName="CompanyName" CommandArgument="<%# CommandArgumentDesc %>" OnClick="ImageButton_Click" />
                </asp:Panel>
            </HeaderTemplate>
            <ItemTemplate>
                <%# Eval("CompanyName")%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView> 

<asp:sqldatasource id="CustomersSource"
    selectcommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
    connectionstring="<%$ ConnectionStrings:NorthWindConnectionString%>" 
    runat="server"/>

Code behind:

  protected const string CommandArgumentAsc = "asc";
  protected const string CommandArgumentDesc = "desc";

  protected void ImageButton_Click(object sender, ImageClickEventArgs e)
  {
    var imageButton = sender as ImageButton;

    if (imageButton != null)
    {
      if (imageButton.CommandArgument == CommandArgumentAsc)
      {
        GridViewTest.Sort(imageButton.CommandName, SortDirection.Ascending);
      }

      if (imageButton.CommandArgument == CommandArgumentDesc)
      {
        GridViewTest.Sort(imageButton.CommandName, SortDirection.Descending);
      }
    }
  }