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

Question

jqGrid column shows sort icons only if column is sorted.

How to make sort icons to visible in all columns so that user has idea that sort can be performed clicking

Answer 1

viewsortcols : [true,'vertical',true]

Answer 2

I find the idea good, so I created the demo which implements the behavior:

The implementation this with the code:

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

// 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();
        }
    }
});

// show sort icons of all sortable columns
colModel = $grid.jqGrid('getGridParam', 'colModel');
$('#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'});
    }
});

UPDATED: If you need to display the information in the columns mostly compact you can make some customization in the CSS of the column header. For example, by default you have 'center' alignment in all column headers. With respect of the following CSS

.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{
    text-align:left
}
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column div.ui-jqgrid-sortable
{
    margin-left:3px;margin-top:3px
}

you can change it to the left alignment . As the results you will have more compact look of the column headers:

see the corresponding demo. By the way I recommend you to test whether the column width is large enough to show the sorting icons in Webkit browsers (Google Chrome or Safari).