title: How do you change the column sort icons for a jqgrid?
body: <p>I need to change the default sort icons for the <strong>jqgrid</strong>. Currently it has an up and down arrow shown for each column. How can I replace it with a single icon that changes as it is clicked on?</p>
  
  <p>Basically, the icon should toggle between ascending, descending and unsorted.</p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p>Using Oleg's answer I changed the default double arrow icons to be a single red up or down arrow that toggles when sorted.</p>
  
  <p>The <code>jqGrid</code> is wrapped in a <code>div</code> with a <em>searchResults</em> <code>class</code>.</p>
  
  <p>This makes the header icons red:</p>
  
  <pre><code>.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon
  {
      background-image: url("../images/ui-icons_cd0a0a_256x240.png");
  }
  </code></pre>
  
  <p>This centers the icons when only one icon is showing and the other is hidden:</p>
  
  <pre><code>.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
  {
      height:12px;
      margin-top:0px;
  }
  </code></pre>
  
  <p>This hides the inactive sort icon:</p>
  
  <pre><code>.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc
  {
      display: none;
  }
  </code></pre>