Sunday 14 November 2010

Making the Text in the DynamicData List Pages GridView Wrap.

Why won’t the text in my Dynamic Data List page GridView wrap? This is answered here and in this post on the ASP.NET Dynamic Data Forum here Re: DynamicField within GridView truncating data where Yuipcheng asks;

“I commented out the code to truncate the FieldValueString, but the rendered text doesn't wrap since the td tag has (style="white-space: nowrap;")”

I answered here but I thought I would document it here also.

Before After
Before After

So you may be asking Dynamic Data 1 didn’t do this, so why does Dynamic Data 4 do it?

The answer it has to do with the validation “*”  showing up next to the field in Edit mode and appears to have just gotten into the GridView as by default we don't do inline editing.

The solution from David Fowler is to create an class and inherit from System.Web.DynamicData.DefaultAutoFieldGenerator and then override the CreateField method, so here it is:

/// <summary>
/// Add the option to the Default Auto Field Generator 
/// to not add the (Style="white-space: nowrap;") to each field.
/// </summary>
public class AdvancedAutoFieldGenerator : DefaultAutoFieldGenerator
    private Boolean _noWrap;

    /// <summary>
    /// Initializes a new instance of the 
    /// <see cref="AdvancedAutoFieldGenerator"/> class.
    /// </summary>
    /// <param name="table">The table.</param>
    /// <param name="noWrap">if set to <c>true</c> 
    /// the (Style="white-space: nowrap;") is added 
    /// to each field.</param>
    public AdvancedAutoFieldGenerator(MetaTable table, Boolean noWrap)
        : base(table)
        _noWrap = noWrap;

    protected override DynamicField CreateField(
        MetaColumn column, 
        ContainerType containerType, 
        DataBoundControlMode mode)
        DynamicField field = base.CreateField(column, containerType, mode)

        // override the wrap behavior
        // with the noWrap parameter
        field.ItemStyle.Wrap = !_noWrap;
        return field;

Listing 1 – Advanced Field Generator

and we apply it in the Page_Load event of the List page (or you own custom page)

// apply custom auto field generator
GridView1.ColumnsGenerator = new AdvancedAutoFieldGenerator(table, false);

This will then remove the unwanted style,

Note: If you still want this on some pages I have not hard coded it, so you can change it in code where you want to.

4 comments: ecommerce development said...

Currently I am working on a project and was in search of this code since from many days. I am glad to have found this code here. It is really very useful to me. Thanks for sharing.

Stephen J. Naughton said...

Your welcome :)


Anonymous said...

Another way is to comment it in Site.css like this:

table.DDGridView .th, table.DDGridView .td, table.DDListView .th, table.DDListView .td
/* white-space: nowrap; */

Stephen J. Naughton said...

This line would work if they hadn't inlined the style in the grid see the before image at the top.