CE's Blog

The ASP.NET GridView control offers a large amount of parameters for customization. Yet in some cases we need to go further for realizing specific goals.
One such feature was needed by a customer who had to display text in a grid view that would easily exceed the amount of column space. What are the possible solutions here?

1. The most basic and least flexible would be to truncate any text exceeding a set limit of characters by applying SUBSTRING in the database query.
2. The other option would be using a TemplateField, which results in a lot of coding overhead, especially if you have to incorporate markup for the insert and update events as well.
3. Depending on your needs, using the CSS text-overflow:ellipsis could be a compact solution, yet it is only supported by Internet Explorer (some kind of workaround for FireFox exists).
4. Perhaps the most elegant approach would be the subclassing of the existing BoundField, which already has all the features ready for inserting and updating. Although we only print the first few characters of the column text, we would give the user an additional feature at hand that allows him to view the whole text by hovering the cursor over the short text.

The class EllipsisTextField extends BoundField by one property that reflects the maximum abount of characters to be displayed. If left empty, the control behaves identical with the BoundField class, so it is backwards compatible.

public class EllipsisTextField : BoundField
{
    public int? MaxChars
    {
        get { return this.ViewState[ "MaxChars" ] as int?; }
        set { this.ViewState[ "MaxChars" ] = value; }
    }
 
    protected override string FormatDataValue( object dataValue, bool encode )
    {
        string sLong = dataValue as string;
        if ( this.MaxChars.HasValue && !String.IsNullOrEmpty( sLong ))
        {
            string sShort = sLong;
            if ( sLong.Length > this.MaxChars.Value )
            {
                sShort = sLong.Substring( 0, this.MaxChars.Value ) + "...";
                sLong = HttpUtility.HtmlEncode( sLong );
                sShort = HttpUtility.HtmlEncode( sShort );
 
                dataValue = "<div title=\"" + sLong + "\" style=\"white-space: nowrap;\">" + sShort + "</div>";
                return base.FormatDataValue( dataValue, false );
            }
        }
        return base.FormatDataValue( dataValue, encode );
    }
}

We override the FormatDataValue method in order to execute our own rendering code. Inside, we truncate the original string if necessary, add ellipses and then add short and long versions to a DIV. When set as the title, any mouse over action will render the full code as a tooltip.

This is a simple custom validator extension class that allows for quick and easy date validation.

public class ValidDateValidator : CustomValidator
{
    public bool RequireInput
    {
        get 
        {
            if ( this.ViewState[ "RequireInput" ] != null )
                return (bool)this.ViewState[ "RequireInput" ];
            return false;
        }
        set { this.ViewState[ "RequireInput" ] = value; }
    }
 
    public ValidDateValidator()
    {
        base.ServerValidate += new ServerValidateEventHandler( ValidDateValidator_ServerValidate );
    }
 
    void ValidDateValidator_ServerValidate( object source, ServerValidateEventArgs args )
    {
        if ( !this.RequireInput && ( String.IsNullOrEmpty( args.Value ) || Convert.IsDBNull( args.Value ) ) )
            args.IsValid = true;
        else
            args.IsValid = IsValidDate( args.Value );
    }
 
    public static bool IsValidDate( string sDate )
    {
        DateTime oDate;
        return DateTime.TryParse( sDate, out oDate );
    }
}

First of all we are adding a new validation event handler in the constructor of the class. Then we add a new property that allows us to specify whether or not empty dates are accepted.
The actual validation function uses the DateTime.TryParse method.
Pay attention though, this sample method parses the given date according to the format rules in your pages locale. If that is not desired, make sure you specify additional parameters in this function to ensure proper results. It is one common pitfall to develop working code on a machine with a different locale than the production system and then see the code break when going live.
If you are accepting the date in a certain format, you might also consider using DateTime.TryParseExact(), which does what it’s name suggests.

This validator works well with Ajax notifications such as the ValidatorCalloutExtender, but it only works on postbacks. If you would like to see it working on the client, you have to resort to JavaScript.