1

Answer in

how to make sort icons visible in all column headers in jqgrid regardless on sort status

describes how to add sortable indication to columns.

It is difficult to distinguish sorted and unsorted column by default sort indicator.

How to underline sorted column header text in addidion to sort indicator ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

2

I modified the demo from the previous answer to the following which display now

enter image description here

I used for the demo the CSS class where I additionally to underlining changed the color of the text

.sortedColumnHeader > div { text-decoration: underline; color: blue; }

If we play forward we can use just the 'ui-state-highlight' for the highlighting (see another demo). The column header will be probably even too much distinguish from the standard column:

enter image description here

The corresponding code is

var $grid = $("#list"), colModel, sortName;

// create the grid
$grid.jqGrid({
    // all typical jqGrid parameters
    onSortCol: function (index, idxcol, sortorder) {
        if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                && this.p.colModel[this.p.lastsort].sortable !== false) {
            // show the icons of last sorted column
            $(this.grid.headers[this.p.lastsort].el)
                .find(">div.ui-jqgrid-sortable>span.s-ico").show();
            $(this.grid.headers[this.p.lastsort].el).removeClass('sortedColumnHeader');
        }
        $(this.grid.headers[idxcol].el).addClass('sortedColumnHeader');
    }
});

// show sort icons of all sortable columns
colModel = $grid.jqGrid('getGridParam', 'colModel');
sortName = $grid.jqGrid('getGridParam', 'sortname');
$('#gbox_' + $.jgrid.jqID($grid[0].id) +
    ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
    var cmi = colModel[i], colName = cmi.name;

    if (cmi.sortable !== false) {
        // show the sorting icons
        $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
    } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
        // change the mouse cursor on the columns which are non-sortable
        $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
    }
    if (cmi.name === sortName) {
        $(this).addClass('sortedColumnHeader');
    }
});

At the end I want to reference one more old answer where it's shown another sophisticated method to highlight the sorted column.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you very much. Excellent. Picture in answer shows date column in yellow bakcground but demo link opened in IE9 does not change Date column background color. Are demo and answer code and code used for picture in answer different ? – Andrus Jan 19 '12 at 08:33
  • 1
    @Andrus: You are welcome! The link to the second demo which uses `'ui-state-highlight'` instead of `'sortedColumnHeader'` is [here](http://www.ok-soft-gmbh.com/jqGrid/ShowAlwaysSortableIcons2.htm) – Oleg Jan 19 '12 at 08:59
  • Thank you. New demo also contains `$(elem).addClass('ui-state-error')` . in Tax column. What is the purpose of this, I havent seend any difference in Tax column? – Andrus Jan 19 '12 at 11:34
  • 1
    @Andrus: The usage of `$(elem).addClass('ui-state-error')` in [the second demo](http://www.ok-soft-gmbh.com/jqGrid/ShowAlwaysSortableIcons2.htm) has no special sense here. It was just a copy from another [answer](http://stackoverflow.com/a/8898300/315935). – Oleg Jan 19 '12 at 11:46