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