How to show ellipses (…) if the text length is lager than the cell width, in Ignite Grid?

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 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 Pavlov
Infragistics, Inc. 

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;
}

Regards,

Arfan Baig