3

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
  • 26,339
  • 60
  • 204
  • 378

2 Answers2

11

viewsortcols : [true,'vertical',true]

LKF
  • 143
  • 1
  • 6
5

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

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank yuo very much. Excellent. I encountered some issues and updated questions about them. – Andrus Jan 17 '12 at 20:07
  • @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. – Oleg Jan 17 '12 at 20:19
  • 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. – Andrus Jan 17 '12 at 20:57
  • 1
    @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 Jan 17 '12 at 21:32
  • 1
    @Andrus: I updated a little the code correspond [the answer](http://stackoverflow.com/a/5640442/315935) to fix the cursor on unsorted columns too. – Oleg Jan 17 '12 at 22:26
  • 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 ? – Andrus Jan 18 '12 at 09:47
  • 1
    @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. – Oleg Jan 18 '12 at 10:19
  • 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 Jan 18 '12 at 11:24
  • 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? – Andrus Jan 18 '12 at 11:30
  • @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. – Oleg Jan 18 '12 at 11:59
  • 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 Jan 18 '12 at 13:06
  • 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 ? – Andrus Jan 18 '12 at 13:11
  • 1
    @Andrus: Thank you! I could reproduce the problem and found the error. I fixed [the demo](http://www.ok-soft-gmbh.com/jqGrid/ColumnChooserAndLocalStorage1_.htm). 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. – Oleg Jan 18 '12 at 13:41
  • Thank you very much. This fixes the issue. I posted question from previous comment in http://stackoverflow.com/questions/8912253/how-to-undeline-sorted-column-header-in-jqgrid – Andrus Jan 18 '12 at 14:59
  • How to move icons enabling code to jqGrid template so that is does not needs to repeated for every jqGrid in page ? – Andrus Jan 18 '12 at 15:04