DataFormatString In Edit Mode (RadGrid)

[Aaron]

I have a column in a grid that is a certain width but the text in the column could be longer than the specified width.  If that happens I wanted to cut off the overflowing text (instead of wrapping) and replace it with an ellipsis.  The only way I could get this to work with CSS was to add the following styles to my page:

<style type="text/css">
div.RadGrid_Vista .rgRow td div,
div.RadGrid_Vista .rgAltRow td div
{
    white-space         : nowrap !important;
    overflow            : hidden !important;
    text-overflow       : ellipsis !important;
}
</style>

Next, I set the width to 150px in the ItemStyle for my column.  This didn't work, so after a lot of trial and error, I realized that those styles would only work on a DIV...not the TD tag that was being created in from the grid control.  To fix this, I added the following DataFormatString value to the GridBoundColumn:   DataFormatString="<div style='width:150px'>{0}</div>"

I had to add the width or else it didn't wrap and ignored the overflow and text-overflow settings.

Ok, so I got all of that to work, but now the last problem I'm having is when I click on the Edit button (EditForms mode), the selected row then expands in height and ignores the styles I added.

I've attached two images.  One that shows what I it looks in view mode, and the other showing what it looks like in edit mode.  I want both to look like the one in view mode (truncated with ellipsis).

Thanks,
Aaron

[Jayesh Goyani]

Hello,

<telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name"></telerik:GridBoundColumn>

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = e.Item as GridDataItem;
                if (item["Name"].Text.Length > 50)
                {
                   item["Name"].Text = item["Name"].Text.Substring(0, 50) + "......";
                }
            }
        }

Let me know if any concern.

Thanks,
Jayesh Goyani

[Aaron]

Thanks for the response, Jayesh.  Unfortunately, that didn't quite qork.  However, it did get me looking into the html source more and I noticed that when you click on a row to edit it, the class name for that row changes from rgRow (or rgAltRow) to rgEditRow.  All I had to do was add the ".rgEditRow" class to my styles and it worked.

div.RadGrid_Vista .rgEditRow td div,
div.RadGrid_Vista .rgRow td div,
div.RadGrid_Vista .rgAltRow td div
{
    white-space         : nowrap !important;
    overflow            : hidden !important;
    text-overflow       : ellipsis !important;
}