how to make sort icons visible in all column headers in jqgrid regardless on sort status
Solution 1
viewsortcols : [true,'vertical',true]
Solution 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).
Andrus
Updated on June 04, 2022Comments
-
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:
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:
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?
After sorting, sort icons in all columns except sorted one are lost. How to persist them ?
-
Andrus almost 12 yearsThank yuo very much. Excellent. I encountered some issues and updated questions about them.
-
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 almost 12 yearsI 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 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 ofbeforeRequest
or in theloadComplete
. I think it should fix the problem. -
Oleg almost 12 years@Andrus: I updated a little the code correspond the answer to fix the cursor on unsorted columns too.
-
Andrus almost 12 yearsThank 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 almost 12 years@Andrus: The condition
this.p.lastsort >= 0
is required because in theif
will be modified the icons in thethis.p.lastsort
-st column of grid (and only the column). I suppose that settinglastsort
to-1
is the part of your customization of jqGrid. It is not needed, because ifsortname
is""
(default value) no sorting will be done. -
Andrus almost 12 yearscode 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 almost 12 yearsline
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 almost 12 years@Andrus: I think that one should just test the value
$.inArray(ts.p.lastsort, permutation)
for>= 0
and change thets.p.lastsort
only for the results. Alternatively the codets.p.lastsort = Math.max(0,$.inArray(ts.p.lastsort, permutation));
could also work, but I didn't test the suggestions myself. -
Andrus almost 12 yearsI 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 almost 12 yearsis 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 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 arraymyColumnsState.permutation
. I changed just the lineif (isColState)
toif (isColState && myColumnsState.permutation.length > 0) {
to callremapColumns
only ifmyColumnsState.permutation
is not empty array. -
Andrus almost 12 yearsThank you very much. This fixes the issue. I posted question from previous comment in stackoverflow.com/questions/8912253/…
-
Andrus almost 12 yearsHow to move icons enabling code to jqGrid template so that is does not needs to repeated for every jqGrid in page ?
-
Whelkaholism almost 10 yearsSurely this should be the answer?!
-
Knut Herrmann almost 10 years@Whelkaholism: yes, works perfect! Look here for parameter description: trirand.com/jqgridwiki/doku.php?id=wiki:options