javascript - SlickGrid: How to view full text in column headers? - Stack Overflow

admin管理员组

文章数量:1344194

I'm using SlickGrid, and right now, if I have really long column headers, SlickGrid cuts the header short with ellipses (...).

My question is: Is there's a way to view the whole text on mouseover?

By the way, I was able to do it for long cell entries by registering this cool plugin .autotooltips.js:

mygrid.registerPlugin(new Slick.AutoTooltips());

Here's a jsFiddle using that plugin: /

Note that if you mouseover a cell with a long value, then you can view the full entry, but it doesn't do that for long column headers.

I'm thinking that I can edit that plugin to allow for that behavior. Any other suggestions? Thanks!

I'm using SlickGrid, and right now, if I have really long column headers, SlickGrid cuts the header short with ellipses (...).

My question is: Is there's a way to view the whole text on mouseover?

By the way, I was able to do it for long cell entries by registering this cool plugin https://github./mleibman/SlickGrid/blob/master/plugins/slick.autotooltips.js:

mygrid.registerPlugin(new Slick.AutoTooltips());

Here's a jsFiddle using that plugin: http://jsfiddle/crystality/h5ZLP/1/

Note that if you mouseover a cell with a long value, then you can view the full entry, but it doesn't do that for long column headers.

I'm thinking that I can edit that plugin to allow for that behavior. Any other suggestions? Thanks!

• javascript
• jquery
• mouseover
• slickgrid

Share Improve this question Follow edited Jul 25, 2012 at 8:57 Crystal asked Jul 25, 2012 at 8:22 CrystalCrystal 19155 silver badges1010 bronze badges 5

• Provide some example, plese. It is very difficult to say something without looking – d.k Commented Jul 25, 2012 at 8:32
• @caligula: Edited, thanks! Example here: jsfiddle/crystality/h5ZLP/1 – Crystal Commented Jul 25, 2012 at 8:58
• How it is supposed to work? I see only white square – d.k Commented Jul 25, 2012 at 9:12
• This is not a direct answer to your question, but I handled this by word-wrapping the column headers - check this link if you are interested: stackoverflow./questions/9098580/… – ganeshk Commented Jul 25, 2012 at 13:52
• Also, to your question, the column-header has a title set (this has always worked for me). In your case the title is being set as blank - hence no tooltip. Inspect the column-header element in firebug or chrome dev tools - you'll see what I mean. – ganeshk Commented Jul 25, 2012 at 14:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Ok - I got this. In the latest version of SlickGrid there seems to be a change made to the way the title attribute is set on the column-headers. Previously, the name attribute of the column would be set as title. Now we need to add a new parameter to the column definition - called toolTip. I edited your fiddle with this and now the tooltips work fine.

http://jsfiddle/100thGear/6sGXx/

I changed your column definition like this:

{ id: "long-val", name: "Really Really Really Long Title", 
field: "longVal", sortable:true, 
toolTip: "Really Really Really Long Title" }

Note that you don't need the slick.autotooltips.js to make this work. That's just for the tooltips on the data.

Let me know if this helps!

The Auto Tooltips plugin now has an option to add tooltips for header cells:

https://mleibman.github.io/SlickGrid/examples/example-autotooltips.html

Suggested Usage:

<script src="../plugins/slick.autotooltips.js"></script>

var options = {
    explicitInitialization: true,
};

grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
grid.init();

本文标签： javascriptSlickGrid How to view full text in column headersStack Overflow