Preferred Language:

Listing 11.31 - LongTextField.cs

Illustrates how to create a custom GridView field that displays long text.

Listing 11.31 - LongTextField.cs (C#)
Copy 

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace myControls
{
    /// <summary>
    /// Enables you to display a long text field
    /// </summary>
    public class LongTextField : BoundField
    {
        private Unit _width = new Unit("250px");
        private Unit _height = new Unit("60px");

        /// <summary>
        /// The Width of the field
        /// </summary>
        public Unit Width
        {
            get { return _width; }
            set { _width = value; }
        }

        /// <summary>
        /// The Height of the field
        /// </summary>
        public Unit Height
        {
            get { return _height; }
            set { _height = value; }
        }

        /// <summary>
        /// Builds the contents of the field
        /// </summary>
        protected override void InitializeDataCell(DataControlFieldCell cell, DataControlRowState rowState)
        {
            // If not editing, show in scrolling div
            if ((rowState & DataControlRowState.Edit) == 0)
            {
                HtmlGenericControl div = new HtmlGenericControl("div");
                div.Attributes["class"] = "longTextField";
                div.Style[HtmlTextWriterStyle.Width] = _width.ToString();
                div.Style[HtmlTextWriterStyle.Height] = _height.ToString();
                div.Style[HtmlTextWriterStyle.Overflow] = "auto";

                div.DataBinding += new EventHandler(div_DataBinding);

                cell.Controls.Add(div);
            }
            else
            {
                TextBox txtEdit = new TextBox();
                txtEdit.TextMode = TextBoxMode.MultiLine;
                txtEdit.Width = _width;
                txtEdit.Height = _height;

                txtEdit.DataBinding += new EventHandler(txtEdit_DataBinding);

                cell.Controls.Add(txtEdit);
            }
        }

        /// <summary>
        /// Called when databound in display mode
        /// </summary>
        void div_DataBinding(object s, EventArgs e)
        {
            HtmlGenericControl div = (HtmlGenericControl)s;

            // Get the field value
            Object value = this.GetValue(div.NamingContainer);

            // Assign the formatted value
            div.InnerText = this.FormatDataValue(value, this.HtmlEncode);
        }

        /// <summary>
        /// Called when databound in edit mode
        /// </summary>
        void txtEdit_DataBinding(object s, EventArgs e)
        {
            TextBox txtEdit = (TextBox)s;

            // Get the field value
            Object value = this.GetValue(txtEdit.NamingContainer);

            // Assign the formatted value
            txtEdit.Text = this.FormatDataValue(value, this.HtmlEncode);
        }

    }
}

The following GridView uses the custom LongTextField field.

Listing 11.32 - ShowLongTextField.aspx (C#)
Copy 

<%@ Page Language="C#" %>
<%@ Register TagPrefix="custom" Namespace="myControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        .grid td, .grid th
        {
            padding:5px;
        }
    </style>
    <title>Show LongTextField</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:GridView
        id="grdMovies"
        CssClass="grid"
        DataSourceID="srcMovies"
        DataKeyNames="Id"
        AutoGenerateColumns="false"
        AutoGenerateEditButton="true"
        Runat="server">
        <Columns>
        <asp:BoundField
            DataField="Title"
            HeaderText="Movie Title" />
        <asp:BoundField
            DataField="Director"
            HeaderText="Movie Director" />
        <custom:LongTextField
            DataField="Description"
            Width="300px"
            Height="60px"
            HeaderText="Movie Description" />
        </Columns>
    </asp:GridView>    

    <asp:SqlDataSource
        id="srcMovies"
        ConnectionString="<%$ ConnectionStrings:Movies %>"
        SelectCommand="SELECT Id, Title, Director, Description
            FROM Movies"
        UpdateCommand="UPDATE Movies SET
            Title=@Title,Director=@Director,Description=@Description
            WHERE Id=@Id"
        Runat="server" />
    
    </div>
    </form>
</body>
</html>