Forum
Log In
Home
Topic RSS
18:52
18/11/2009
Offline
Hello,
I sometimes have the problem that the column sort icon is not visible, if the column is too small or the column text is too big.
- Is it possible to move the sort icon to the front of the column so it will be always visible if used.
- Or another solution would be to put the sort icon one layer above the text, so that it is always visible at the most right place in the column header cell.
Maybe someone knows a simple solution for this problem.
Kind regards,
Klaus.
20:43
Moderators
30/10/2007
Offline
Hello,
Thanks. Will add this in todo list.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
13:49
18/11/2009
Offline
Hello,
here are my changes to put the sort-icon to the front of the column header cell … (based on jqGrid 3.6.4)
CSS:
/* fix table sort icon – position to the left */
.ui-jqgrid .ui-jqgrid-sortable span.s-ico {
position: absolute;
left: 0;
}
/* dynamically add margin-left to span.colheadername if s-ico shown */
.ui-jqgrid .ui-jqgrid-sortable span.colHeaderName.sortActive {
margin-left: 15px;
}
JS:
@ sortData = function … // show/hide sort-icon span and apply CSS class sortActive
if(!ts.p.viewsortcols[0]) {
if(ts.p.lastsort != idxcol) {
$("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide();
+ $("tr th:eq("+ts.p.lastsort+") span.colHeaderName",thd).removeClass("sortActive");
$("tr th:eq("+idxcol+") span.s-ico",thd).show();
+ $("tr th:eq("+idxcol+")+ span.colHeaderName",thd).addClass("sortActive");
}
}
ts.p.lastsort = idxcol;
@ var thead = "<thead><tr class='ui-jqgrid-labels' role='rowheader'>", …
// move sort-icons before colName and wrap colName inside a span (for styling)
for(i=0;i<this.p.colNames.length;i++){
…
- thead += "<div id='jqgh_"+ts.p.colModel[i].name+"' "+tdc+">"+ts.p.colNames[i];
+ thead += "<div id='jqgh_"+ts.p.colModel[i].name+"'+"+tdc+">"+imgs+"
<span+class='colHeaderName'>"+ts.p.colNames[i]+"</span></div></th>";
- thead += imgs+"</div></th>";
}
@ $("th",thr).each(function ( j ) { … // show/hide sort-icon span and apply CSS class sortActive
if(sort) {
- if(ts.p.viewsortcols[0]) {$("div span.s-ico",this).show(); if(j==ts.p.lastsort){ $("div span.ui-icon-"+ts.p.sortorder,this).removeClass("ui-state-disabled");}}
- else if( j == ts.p.lastsort) {$("div span.s-ico",this).show();$("div span.ui-icon-"+ts.p.sortorder,this).removeClass("ui-state-disabled");}
+ if(ts.p.viewsortcols[0]) {
+ $("div span.s-ico",this).show();
+ $("div span.colHeaderName",this).addClass("sortActive");
+ if(j==ts.p.lastsort){
+ $("div span.ui-icon-"+ts.p.sortorder,this).removeClass("ui-state-disabled");
+ }
+ } else if( j == ts.p.lastsort) {
+ $("div span.s-ico",this).show();
+ $("div span.ui-icon-"+ts.p.sortorder,this).removeClass("ui-state-disabled");
+ $("div span.colHeaderName",this).addClass("sortActive");
+ }
@ setLabel: function … // changed append(ico) to prepend(ico)
var thecol = $("tr.ui-jqgrid-labels th:eq("+pos+")",$t.grid.hDiv);
if (nData){
var ico = $(".s-ico",thecol);
- $("[id^=jqgh_]",thecol).empty().html(nData).append(ico);
+ $("[id^=jqgh_]",thecol).empty().html("<span class='colHeaderName'>" + nData + "</span>").prepend(ico);
$t.p.colNames[pos] = nData;
}
Maybe you could integrate this feature sometimes.
Kind regards,
Klaus.
10:14
27/01/2014
Offline
Hi,
just want to pop this task up again.
I think this would be simple to implement and large tables would benefit from this one.
Greetings,
-timo
17:00
Moderators
30/10/2007
Offline
Hello,
After the grid is created you can do this:
jQuery('span.s-ico').css({position:'absolute', left:'0px',top:'0px'});
Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
11:23
27/01/2014
Offline
Hi,
yes, you are right.
But i want the sort icon on the left and next to it the label.If the label is too wide
to be displayed, it will be cut off on the right, but the icon is still positioned next to
the label. The label will not overwrite the sort icon.
I have achieved this by adding an extra span (span.col-header-name) for the label
and using the following css. I do not know how to achieve the same without patching
the jqgrid source.
// fix table sort icon – position to the left
.ui-jqgrid .ui-jqgrid-sortable span.s-ico {
float : left;
}
// dynamically add margin-left to span.colheadername if s-ico shown
.ui-jqgrid .ui-jqgrid-sortable span.col-header-name {
display : inline-block;
position : absolute;
left : 17px;
}
Greetings,
-timo
Most Users Ever Online: 715
Currently Online:
36 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
