-1

How to add ellipsis to jQGrid column headerText.

Current Column Html Header for jqGrid is in like this : 

<th id="ControlType" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 141px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>
<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable">
    W'ñÝÃáèTÿpê !!!_W<span class="s-ico" style="display:none">
        <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
        <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
    </span>

"

I want to add ellipsis to this "W'ñÝÃáèTÿpê !!!_W" in the header. I donot want to edit the jQGrid.js

Rohit Kumar
  • 829
  • 2
  • 12
  • 21

2 Answers2

0

Try to use CSS rule

.ui-jqgrid .ui-jqgrid-labels .ui-th-column div { text-overflow: ellipsis }
Oleg
  • 220,925
  • 34
  • 403
  • 798
0

Since the .s-ico span tag inside .ui-jqgrid-sortable is set to display:none you can use a pseudo element to add ellipsis to the text:

.ui-jqgrid-sortable:after {
  content:"...";
}

If the span will be toggled to display:block then you need to wrap the desired text into another element and apply the css rule to that element.

P.S: @Oleg's solution will work only if onlyi you set the heading overflow to hidden and the content actually goes out of it's container.

Nojan A.
  • 881
  • 1
  • 11
  • 27
  • Yes by default icon is display block. When I add ellipsis to it. icon also gets toggled (not the desired option) Wrapping only the text in a div will require changes in jqGrid.js (I believe that is where this html gets created). and I am not allowed to make changes in its jQgrid.js – Rohit Kumar Aug 07 '15 at 05:07
  • Can we somehow wrap "W'ñÝÃáèTÿpê !!!_W" that text into a div using jquery, then it will be easy a easy way out. :) – Rohit Kumar Aug 07 '15 at 05:09
  • @RohitKumar Check this out: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery You can then wrap the text node using jQuery `wrap` method: http://api.jquery.com/wrap/ – Nojan A. Aug 07 '15 at 11:47