jquery - 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.

UPDATED: Free jqGrid fork have many options to customize sorting icons. First of all if supports Font Awesome icons. One need just include the Font Awesome CSS and the option . One can, for example, use threeStateSort: true to allow to display the item in original, unsorted order on th 3-d click on the column header. One can use sortIconsBeforeText: true to change the order of icons and the text. Placing of the sorting icons before the text could be helpful in case of usage long textes in the column headers. One can use showOneSortIcon: true option to show only one (desc or asc) sorting icons instead of two sorting icons (one over the second one or one near the second one).

One can even full customize the sorting icons by overwriting $.jgrid.builderSortIcons method. The demo shows how one can use simple custom $.jgrid.builderSortIcons method to set *different sorting icons for differents columns. The demo uses three different icons depend on the type of data in the column. The columns with the default sorting type sorttype: "text" displays

and

the columns having numeric types (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" or sorttype: "currency") displays

and

and all other column, for example, the column having sorttype: "date" displays

and