Wrap or truncate text to stop column resizing

May 20, 2014 at 6:14 PM
Hi,

Is there any way to wrap the text or truncate it to stop the column resizing if a large value is in it? I am using the grid for a list of files, some of which have very long paths, and some have long names. When these are displayed it causes that column to become very wide and ruin the grid.

I have tried both

.SetWidth("200px") and .SetWidth(200) but neither seem to have any effect.

I would Ideally like to truncate the value and have the full value on a tool tip when the user hovers over the cell. But at the very least the ability to wrap the text would be a great help.

Thanks very much,

Regards,

Mark
May 27, 2014 at 2:53 PM
I am also looking for this type of solution
May 28, 2014 at 2:24 PM
Edited May 28, 2014 at 7:02 PM
Part One: Solved: Fix the 'Broken' grid (where is pushed the column way out etc)
I found a solution that works for me using CSS word-wrap properties. This only solves the issue where is ruins the grid. I would still like an ellipses solution with tool tip.

Example: ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Is broken up like:
dddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddd

/ This ensures words will wrap in the column/
table {
    word-wrap: break-word;
    table-layout: fixed;
}
Part 2 (Solved) Abbreviating Text without ellipsis
Adding a div inside the column and using the following CSS works to add the ellipses in a standard table column

The truncate class does work on a TD directly if you add display:block to the class below, but the result is a 'clip' rather than ellipsis.

CSS
.truncate {
width: 50px; / Set desired with of column (assuming you are not using responsive sizing /
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Grid.MVC Column definition
columns.Add(foo => foo.Notes)
               .Sanitized(false)
               .Encoded(false)
               .RenderValueAs(d => @<div class=truncate> @d.Notes </div>);

Part 3: Showing clipped text in a tooltip? (Solved -Sorta)_
Adding title=d.Notes (or whatever your long filename property is) adds a tooltip. It is kinda quirky in that it works for long, unbroken text but for strings with spaces, it only shows the string before the first space.

columns.Add(foo => foo.Notes)
               .Sanitized(false)
               .Encoded(false)
              .RenderValueAs(d => @<div class=truncate title=@d.Notes> @d.Notes </div>);