jQuery Grid Plugin - jqGrid - Topic: Sort Icon not always visible ...

benk@b1-systems.de on Sort Icon not always visible ...

Sun, 09 Mar 2014 11:23:52 +0200

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

tony on Sort Icon not always visible ...

Mon, 24 Feb 2014 17:00:35 +0200

Hello,

After the grid is created you can do this:

jQuery('span.s-ico').css({position:'absolute', left:'0px',top:'0px'});

Regards

benk@b1-systems.de on Sort Icon not always visible ...

Fri, 21 Feb 2014 10:14:09 +0200

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

Klaus on Sort Icon not always visible ...

Wed, 05 May 2010 13:49:26 +0300

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.

tony on Sort Icon not always visible ...

Wed, 21 Apr 2010 20:43:27 +0300

Hello,

Thanks. Will add this in todo list.

Best Regards

Tony

Klaus on Sort Icon not always visible ...

Tue, 20 Apr 2010 18:52:13 +0300

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.