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

11,131

Solution 1

viewsortcols : [true,'vertical',true]

Solution 2

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

enter image description here

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:

enter image description here

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

Share:
11,131
Andrus
Author by

Andrus

Updated on June 04, 2022

Comments

  • Andrus
    Andrus over 1 year

    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 in column header? Probably both sort direction triangles must be in inactive.

    Telerik radgrid has this:

    http://www.telerik.com/community/forums/aspnet/grid/possible-to-show-sort-icon-regardless-sort-status.aspx

    How to implement this in jqGrid ? Currently there are no any indicaton that columns are sortable.

    Update

    I tried solution from answer using colmodel below.

    Issues:

    1. For narrow and columns sort icons are not displayed or displayed partially. There is wide empty space in right side of columns header. How to decrease this empty space so that column header text and sort icon can appear in this area?

    2. After sorting, sort icons in all columns except sorted one are lost. How to persist them ?

  • Andrus
    Andrus almost 12 years
    Thank yuo very much. Excellent. I encountered some issues and updated questions about them.
  • Oleg
    Oleg almost 12 years
    @Andrus: You are welcome! Do you can reproduce the described problem on my demo? You wrote "After sorting, sort icons in all columns except sorted one are lost." Do you used onSortCol with the code which I suggested? The problem with with not full icons can exist if the width of the columns not width enough. In the case you should have the same problem independent on my solution. If you just use the original jqGrid you should have the same visibility.
  • Andrus
    Andrus almost 12 years
    I cant reproduce the issue in your demo. Steps to reproduce: a) In IE9 press F5, wait for page load finish. b) click in Liik column. All other col icons are lost. I sent test url to you. I used exactly your onSortCol code.
  • Oleg
    Oleg almost 12 years
    @Andrus: I can't debug full your code to see who hide the icons in the column headers, but you can just make the icons visible (the code after // show sort icons of all sortable columns from my answer) inside of beforeRequest or in the loadComplete. I think it should fix the problem.
  • Oleg
    Oleg almost 12 years
    @Andrus: I updated a little the code correspond the answer to fix the cursor on unsorted columns too.
  • Andrus
    Andrus almost 12 years
    Thank you very much. I added updated code. Icon loss is caused by condition this.p.lastsort >= 0 in onSortCol if . If grid is initially unsorted, this.p.lastsort value is -1 and thus onSortCol code is not executed and icons are not displayed on first sort. If line ` sortname: 'invdate'` is removed from your demo this can probably reproduces in your demo also. How to fix this ?
  • Oleg
    Oleg almost 12 years
    @Andrus: The condition this.p.lastsort >= 0 is required because in the if will be modified the icons in the this.p.lastsort-st column of grid (and only the column). I suppose that setting lastsort to -1 is the part of your customization of jqGrid. It is not needed, because if sortname is "" (default value) no sorting will be done.
  • Andrus
    Andrus almost 12 years
    code does not set lastsort to -1 explicity. After removing grid state restore (used from your other answer) problem disappears. So it looks like grid state restore sets lastsort to -1 implicity
  • Andrus
    Andrus almost 12 years
    line ts.p.lastsort = $.inArray(ts.p.lastsort, permutation); in jqGrid code in remapcolumns sets lastsort to -1 and this causes icons to disappear. How to fix this?
  • Oleg
    Oleg almost 12 years
    @Andrus: I think that one should just test the value $.inArray(ts.p.lastsort, permutation) for >= 0 and change the ts.p.lastsort only for the results. Alternatively the code ts.p.lastsort = Math.max(0,$.inArray(ts.p.lastsort, permutation)); could also work, but I didn't test the suggestions myself.
  • Andrus
    Andrus almost 12 years
    I duplicated init code from answer after // show sort icons of all sortable columns in start of onSortCol. It looks like this solves the issue.
  • Andrus
    Andrus almost 12 years
    is there easy way to make sorted column more visible, eq. underline sorted color header text and show active sort icon in red color like described in other answer ?
  • Oleg
    Oleg almost 12 years
    @Andrus: Thank you! I could reproduce the problem and found the error. I fixed the demo. The problem was that remapColumns was called with empty array myColumnsState.permutation. I changed just the line if (isColState) to if (isColState && myColumnsState.permutation.length > 0) { to call remapColumns only if myColumnsState.permutation is not empty array.
  • Andrus
    Andrus almost 12 years
    Thank you very much. This fixes the issue. I posted question from previous comment in stackoverflow.com/questions/8912253/…
  • Andrus
    Andrus almost 12 years
    How to move icons enabling code to jqGrid template so that is does not needs to repeated for every jqGrid in page ?
  • Whelkaholism
    Whelkaholism almost 10 years
    Surely this should be the answer?!
  • Knut Herrmann
    Knut Herrmann almost 10 years
    @Whelkaholism: yes, works perfect! Look here for parameter description: trirand.com/jqgridwiki/doku.php?id=wiki:options