Getting rid of the ellipsis in some header columns not working

[jplevene]

Setting the following colModel attributes does not work:

Code: [Select]

{dataIndx:"NOTE", dataType:"stringi", title:lang.noteTxt, halign:"center", sortable: false,
render:function(ui){ return { cls: "italictext", attr:{title:ui.rowData["NOTE"]} };}
},
{dataIndx:"IS_STOCK", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-gear"></span>',
attrHead: {title:lang.edit_item_kind[2], style:"text-overflow:unset"},
styleHead: {"text-overflow":"unset"},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_CONSUMABLE", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-cart-b"></span>',
attrHead: {title:lang.edit_item_kind[1]},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_LABOUR", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-person"></span>',
attrHead: {title:lang.edit_item_kind[4]},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
}
The reason is that the ellipsis is set in a child div so setting attrHead or styleHead has no affect.  I only need to get rid of it on 3 columns out of 5.  The reason is that it shouldn't be there, but appears due to a re-sizing and the fact that I am using a jQuery icon

[paramvir]

I checked by adding the columns shared by you in this example:

Code: [Select]

{dataIndx:"NOTE", dataType:"stringi", title:"", halign:"center", sortable: false,
render:function(ui){ return { cls: "italictext", attr:{title:"" }}}
},
{dataIndx:"IS_STOCK", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-gear"></span>',
attrHead: {title:"", style:"text-overflow:unset"},
styleHead: {"text-overflow":"unset"},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_CONSUMABLE", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-cart-b"></span>',
attrHead: {title:""},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_LABOUR", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-person"></span>',
attrHead: {title:""},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
}

https://paramquery.com/pro/demos/wrap

but unable to reproduce the ellipsis beside the icon in any of the columns. Any other changes in your code I should be aware of?

[jplevene]

I added the columns to the end, using Cupertino theme (JQuery) in you demo and the Ellipsis were there, albeit just one dot of them.  Make sure screen is as wide as possible.

See screen shot attached

Resizing the screen seems to make them go, but I think that is only because the columns are thinner.

[paramvir]

Ok, I see that. you can get rid of that by either using hwrap: true option

or adding following css rule

Code: [Select]

<style>
.pq-icon-col-sort{
display: none;
}
</style>


[jplevene]

I can't as some columns sort and I need that.  Also my CSS is shared across multiple pages and they use the sorting icons, etc.

It's not that major, but if you could in the next version give some way of removing ellipsis that would be great.

BTW hwrap is false not true

[paramvir]

The suggested css solution doesn't affect the display of sorting icons in sorted columns.

[jplevene]

But it effects all other grids and columns, I only want 3 out of 5 columns to not have the elipsis

[paramvir]

Could you please share a jsfiddle how it's affecting the other columns.