Hello,
The Ignite Grid wraps the words to the next line if the text to be displayed exceeds the length of the Row Cell. I would want to display an ellipses in this case.
For example:
"A quick brown fox jumps over the lazy dog"
should be display as
"A quick brown fox..."
Instead of this:
"A quick brown fox
jumps over the lazy
dog"
And when we hover over the cell the tooltip should show the actual text.
Please suggest how to achieve this behavior in the Ignite Grid?
Regards,
Arfan Baig
Hello Martin,
Thanks a lot for the smartest solution.
However, I have made it more generic to work for the grids on all the pages on my Application like this:
.ui-iggrid > div > table > tbody > tr > td { white-space: nowrap; text-overflow: ellipsis; }
.ui-iggrid > div > table > thead > tr > th { white-space: nowrap; text-overflow: ellipsis; }
Hello Arfan,
You can use the following CSS:
<style type="text/css"> #grid1 > tbody > tr > td { white-space: nowrap; text-overflow: ellipsis; }</style>
where #grid1 is the id of your grid.
Note: In order to work this CSS your grid should be initialized on a table element like this: <table id="grid1"></table>
Best regards,Martin PavlovInfragistics, Inc.