如何使asp.net gridview能够排序？

Question

Okay so here is the big question that I have been working on for hours now.

I got my gridview and I got a header that will always stay at top that I use jQuery for the header, I got at the top always wont get the hyperlinks from gridview allow sorting.

I know that I can sort the gridview by adding: ORDER BY ColumnName. But I don't know how to create the click event or how to display an arrow (if possible) so you can see if it's in ascending or descending. Also if you click it it will change from ascending/descending

My code is so far:

Side.aspx

            <div id="GHead"></div>
            <div style="overflow: auto; height: 100%">
                <asp:GridView ID="GridView1" runat="server" AllowSorting="true" AutoGenerateColumns="false" BackColor="White" Width="100%" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" AutoGenerateSelectButton="true" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                    <Columns>
                        <asp:BoundField HeaderText="ID" DataField="ID" />
                        <asp:BoundField HeaderText="Tildelt" DataField="Tildelt" />
                        <asp:BoundField HeaderText="Firma" DataField="Firma" />
                        <asp:BoundField HeaderText="Kontakt" DataField="Kontakt" />
                        <asp:BoundField HeaderText="Svar" DataField="Svar" />
                        <asp:BoundField HeaderText="Emne" DataField="Emne" />
                        <asp:BoundField HeaderText="Due Date" DataField="DueDate" />
                        <asp:BoundField HeaderText="Prioritet" DataField="Prioritet" />
                        <asp:BoundField HeaderText="Status" DataField="Status" />
                        <asp:BoundField HeaderText="Lukke Dato" DataField="Lukke Dato" />
                    </Columns>
                    <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                    <RowStyle BackColor="White" ForeColor="#330099" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                    <SortedAscendingCellStyle BackColor="#FEFCEB" />
                    <SortedAscendingHeaderStyle BackColor="#AF0101" />
                    <SortedDescendingCellStyle BackColor="#F6F0C0" />
                    <SortedDescendingHeaderStyle BackColor="#7E0000" />
                </asp:GridView>
            </div>

jQuery code

<script src="../Scripts/jquery-1.7.1.js"></script>
<script lang="ja">
    $(document).ready(function () {
        var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); //clone copy of gridview with style
        $(gridHeader).find("tr:gt(0)").remove(); // removes all rows except first row
        $('#<%=GridView1.ClientID%> tr th').each(function (i) {
            //sets width of each th from gridview
            $("th:nth-child("+(i+1)+")",gridHeader).css('width', ($(this).width() + 1).toString() + "px");
        });
        $("#GHead").append(gridHeader);
        $('#GHead').css('position', 'absolute');
        $('#GHead').css('top', $("#<%=GridView1.ClientID%>").offset().top);

    });
</script>

I got all the jQuery from the internet.

Here is what it looks like now.

Answer 1

Use AllowSorting proprty to do what do you want and do not use third-party tools like jQuery when framework has standard functionality to do it.

For example:

<asp:GridView ID="SomeGridView" AutoGenerateColumns="False" runat="server" Width="100%" AllowPaging="True"
    PageSize="50" AllowSorting="True" OnPageIndexChanging="SomeGridView_OnPageIndexChanging"
    OnSorting="SomeGridView_OnSorting" OnRowDataBound="SomeGridView_OnRowDataBound">

Answer 2

Okay I found a solution how to make them clickable. sinse they arent automaticly generated I needed to put in SortExpression for each boundfield.

Did not find it out myself I found this Link where he had a problem just like me and with a answer.