I am trying to implement a gridview that has a fixed header when scrolling, but also allows sorting when you click the header columns. After some time searching, I found a great solution on the Internet that works great on my site. If you have the same question, check here - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net .aspx
Ignore the example on the page, this did not work when I tried to sort it, but it was functional when I put it on my own page.
Here is my question: I was hoping to be able to sort by several columns together, and the code on the site allows sorting by only one column. Anyone have any suggestions for adding a second sort level?
Here is my code:
<script type = "text/javascript"> $(document).ready(function () { $("#<%=ChangedUPCs2.ClientID%>").tablesorter(); SetDefaultSortOrder(); }); function Sort(cell, sortOrder) { var sorting = [[cell.cellIndex, sortOrder]]; $("#<%=ChangedUPCs2.ClientID%>").trigger("sorton", [sorting]); if (sortOrder == 0) { sortOrder = 1; cell.className = "sortDesc"; } else { sortOrder = 0; cell.className = "sortAsc"; } cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")"); cell.onclick = function () { Sort(this, sortOrder); }; document.getElementById("container").scrollTop = 0; } function SetDefaultSortOrder() { var gvHeader = document.getElementById("dummyHeader"); var headers = gvHeader.getElementsByTagName("TH"); for (var i = 0; i < headers.length; i++) { headers[i].setAttribute("onclick", "Sort(this, 1)"); headers[i].onclick = function () { Sort(this, 1); }; headers[i].className = "sortDesc"; } }
<table id="dummyHeader" cellspacing="0" rules="all" border="1" style="width: 800px; border-collapse:collapse;" class = "grid"> <thead> <tr> <th scope="col" style="width: 30px;">Tier</th> <th scope="col" style="width: 75px;">UPC</th> <th scope="col" style="width: 50px;">Line Code</th> <th scope="col" style="width: 100px;">Brand</th> <th scope="col" style="width: 205px;">Product</th> <th scope="col" style="width: 70px;">Old Qty / Old Price</th> <th scope="col" style="width: 70px;">New Qty / New Price</th> <th scope="col" style="width: 50px;">Cost</th> <th scope="col" style="width: 50px;">Old Margin</th> <th scope="col" style="width: 50px;">New Margin</th> <th scope="col" style="width: 50px;">Tag Type</th> <th scope="col" style="width: 50px;">Effective Date</th> </tr> </thead> </table> <div id="container" style="height:200px; overflow: auto; width: 817px;"> <asp:GridView ID="ChangedUPCs2" runat="server" AutoGenerateColumns="False" DataKeyNames="banner,enterprise_zone,UPC,ProductDescriptionLong" DataSourceID="Changes2" class="styleGrid" ondatabound="ChangedUPCs2GridDataBound" Width = "800px" ViewStateMode = "Disabled"> <Columns> <asp:TemplateField HeaderText="Tier" ItemStyle-Width="30px"> <ItemTemplate> <asp:Label ID="Tier" Text='<%# Eval("enterprise_zone") %>' runat="server" class="zn"/> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="UPC" HeaderText="UPC" ItemStyle-Width="75px" > </asp:BoundField> <asp:BoundField DataField="line_code" HeaderText="Line Code" ItemStyle-Width="50px" > </asp:BoundField> <asp:BoundField DataField="BrandName" HeaderText="Brand" ItemStyle-Width="100px" > </asp:BoundField> <asp:BoundField DataField="ProductDescriptionLong" HeaderText="Product" ItemStyle-Width="205px"> </asp:BoundField> <asp:TemplateField HeaderText="Old Qty / Old Price"> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("ttlqty", "{0:N0}") %>'></asp:Label> <asp:Label ID="Label2" runat="server" Text=" / "></asp:Label> <asp:Label ID="Label3" runat="server" Text='<%# Bind("ttlretailprice", "{0:c}") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ttlqty") %>'></asp:TextBox> <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ttlretailprice") %>'></asp:TextBox> </EditItemTemplate> <ItemStyle Width="70px" /> </asp:TemplateField> <asp:TemplateField HeaderText="New Qty / New Price"> <ItemTemplate> <asp:Label ID="Label7" runat="server" Text='<%# Bind("new_base_qty", "{0:N0}") %>'></asp:Label> <asp:Label ID="Label8" runat="server" Text=" / "></asp:Label> <asp:Label ID="Label9" runat="server" Text='<%# Bind("new_base_retail", "{0:c}") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("new_base_qty") %>'></asp:TextBox> <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("new_base_retail") %>'></asp:TextBox> </EditItemTemplate> <ItemStyle Width="70px" /> </asp:TemplateField> <asp:BoundField DataField="new_LC" HeaderText="Cost" SortExpression="new_LC" DataFormatString="{0:c}" ItemStyle-Width="50px"/> <asp:BoundField DataField="margin_current" HeaderText="Current Margin" SortExpression="margin_current" ItemStyle-Width="50px" DataFormatString="{0:P1}"/> <asp:BoundField DataField="margin_new" HeaderText="New Margin" SortExpression="margin_new" ItemStyle-Width="50px" DataFormatString="{0:P1}"/> <asp:BoundField DataField="tag_type" HeaderText="Tag Type" ItemStyle-Width="50px" > </asp:BoundField> <asp:BoundField DataField="effective_dt" HeaderText="Effective Date" DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="50px" > </asp:BoundField> </Columns> </asp:GridView> </div>
In C #:
protected void ChangedUPCs2GridDataBound(object sender, EventArgs e) { ChangedUPCs2.HeaderRow.Attributes["style"] = "display:none"; ChangedUPCs2.UseAccessibleHeader = true; ChangedUPCs2.HeaderRow.TableSection = TableRowSection.TableHeader; }