How do you change the column sort icons for a jqgrid?

Question

I need to change the default sort icons for the jqgrid. 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?

Basically, the icon should toggle between ascending, descending and unsorted.

---

Solution

Using Oleg's answer I changed the default double arrow icons to be a single red up or down arrow that toggles when sorted.

The jqGrid is wrapped in a div with a searchResults class.

This makes the header icons red:

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon
{
    background-image: url("../images/ui-icons_cd0a0a_256x240.png");
}

This centers the icons when only one icon is showing and the other is hidden:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
{
    height:12px;
    margin-top:0px;
}

This hides the inactive sort icon:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc
{
    display: none;
}

Answer 1

jqGrid use jQuery UI for the sort icons. You can implement your own theme intaractive on the http://jqueryui.com/themeroller/ and download it at the end of customization. If you only want to change the sort icons to other icons already existing in the theme you can do this more easy. But before all you have to understand how the icons will be used in the column headers.

At the initialization time it will be created headers for all columns of jqGrid. Every header contain spans with the sort icons. The span blocks looks like following

<span class="s-ico" style="display: none;">
     <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" sort="asc" />
     <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" sort="desc" />
</span>

Because of having "ui-icon" class the elements has background which come from the jQuery UI theme which you use. From the background will be used the parts corresponds to "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" icons. Classes ui-icon, ui-icon-triangle-1-n and ui-icon-triangle-1-s is defined as following

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }

If you want to replace there to other icons (see all standard available icons at the botom of http://jqueryui.com/themeroller/) you can do this for example directly after creating the jqGrid (after jQuery("#list").jqGrid({/*...*/});). If you don't find in the background image the icons which you need you should better not change an existing icons. You can add some new parts in the background image which you use.

There are no direct support for 3-state sort icons (ascending, descending and unsorted) in jqGrid. If you do want to implement this I'll recommend you to read carefully implementation of sortData function of grig.base.js which you find in src subdirectory of downloaded jqGrid sources. This function call jQuery.hide() or jQuery.show() functions for the span.s-ico, add or remove ui-state-disabled class on one from the child spans and call onSortCol event handle if it is defined. So you can implement all changeing of sort icons inside of your custom onSortCol event handle.