Extending the GridView control

Extending Grid View Control of ASP .NET

If you want to modify some functionality of existing Grid View control of ASP .Net then you always have the option of extending the control. In this article I have extend the Grid View with custom field.

To extend the Grid View control you can inherit the new class from existing class or any of the following class

1). DataControlField – The base class for bind field

2). ButtonFieldBase – The base class for all button field and command field.

In this article I am extending the Grid View control of ASP .Net with LongTextField and ConfirmDeleteButton (it will be in my next blog)

Extending the Grid View control with LongTextField

None of the existing Grid View field provide facility for handling the long text like description field, so I am going to create LongTextField, which is used to display the long text regard less of the length text.

In normal display mode Grid View control display text in scrolling <DIV> tab, and in edit mode it will display text in multi-line text box. To create custom field, a new class must inherited from base class BoundField control. The following listing contain the code for LongTextField.

Imports Microsoft.VisualBasic

Namespace myControls

    Public Class LongTextField
        Inherits BoundField

        Private _Height As Unit = New Unit("60px")
        Private _Width As Unit = New Unit("250px")
        Public Property Height() As Unit
            Get
                Return _Height
            End Get
            Set(ByVal value As Unit)
                _Height = value
            End Set
        End Property


        Public Property Width() As Unit
            Get
                Return _Width
            End Get
            Set(ByVal value As Unit)
                _Width = value
            End Set
        End Property

        Protected Overrides Sub InitializeDataCell(ByVal cell As System.Web.UI.WebControls.DataControlFieldCell, ByVal rowState As System.Web.UI.WebControls.DataControlRowState)
            ' If not editing, show in scrolling div
            If (rowState And DataControlRowState.Edit) = 0 Then
                Dim div As New HtmlGenericControl("div")
                div.Attributes("class") = "longTextField"
                div.Style(HtmlTextWriterStyle.Width) = _Width.ToString()
                div.Style(HtmlTextWriterStyle.Height) = _Height.ToString()
                div.Style(HtmlTextWriterStyle.Overflow) = "auto"
                AddHandler div.DataBinding, AddressOf div_DataBinding
                cell.Controls.Add(div)
            Else
                Dim txtEdit As New TextBox()
                txtEdit.TextMode = TextBoxMode.MultiLine
                txtEdit.Width = _Width
                txtEdit.Height = _Height
                AddHandler txtEdit.DataBinding, AddressOf txtEdit_DataBinding
                cell.Controls.Add(txtEdit)
            End If
        End Sub

        ''' 
        ''' Called when databound in display mode
        ''' 
        Private Sub div_DataBinding(ByVal s As Object, ByVal e As EventArgs)
            Dim div As HtmlGenericControl = DirectCast(s, HtmlGenericControl)
            ' Get the field value
            Dim value As [Object] = Me.GetValue(div.NamingContainer)
            ' Assign the formatted value
            div.InnerText = Me.FormatDataValue(value, Me.HtmlEncode)
        End Sub

        ''' 
        ''' Called when databound in edit mode
        ''' 
        Private Sub txtEdit_DataBinding(ByVal s As Object, ByVal e As EventArgs)
            Dim txtEdit As TextBox = DirectCast(s, TextBox)
            ' Get the field value
            Dim value As [Object] = Me.GetValue(txtEdit.NamingContainer)
            ' Assign the formatted value
            txtEdit.Text = Me.FormatDataValue(value, Me.HtmlEncode)
        End Sub

    End Class
End Namespace

In this listing InitializeDataCell is overridden, this method is responsible for creating all the control in Normal and Edit mode. First check for the mode, if the mode is not in edit then div tag is created and text is rendered inside div. If the mode is edit then Multi-line text box is created and text is render inside the Multi-line text box.

You can use LongTextField as shown in following listing. This page use the LongTextField  for display the holiday description

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Temp.aspx.vb" Inherits="Temp" EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD runat="server">   

    <FORM id=form1 runat="server">
   <asp:ScriptManager id=ScriptManager1 runat="server">
    </asp:ScriptManager>
  <asp:GridView id=grvHoliday runat="server" DataKeyNames="Holiday_ID" AutoGenerateEditButton="True" DataSourceID="lds_Holiday" AutoGenerateColumns="False">
                <ROWSTYLE BorderWidth="0px" VerticalAlign="Top" HorizontalAlign="Left">
                <EDITROWSTYLE BorderWidth="0px" VerticalAlign="Top" HorizontalAlign="Left">
                <COLUMNS>
                    <?XML:NAMESPACE PREFIX = CustomField /><CustomField:DeleteButtonField>
                    </CustomField:DeleteButtonField>
                    <asp:BoundField Visible="False" SortExpression="Holiday_ID" ReadOnly="True" HeaderText="Holiday_ID" DataField="Holiday_ID"></ASP>
                    <asp:TemplateField SortExpression="Title" HeaderText="Title">
                        <EDITITEMTEMPLATE>
                            <asp:TextBox id=txtTitle runat="server" Text='<%# Bind("Title") %>'></asp:TextBox>
                        </EDITITEMTEMPLATE>
                        <ITEMTEMPLATE>
                            <asp:Label id=lblTitle runat="server" Text='<%# Bind("Title") %>'></asp:Label>
                        </ITEMTEMPLATE>
                    </asp:TemplateField>
                    <CustomField:LongTextField HeaderText="Description" DataField="Description" Width="300px" Height="60px">
                    </CustomField:LongTextField>
                    <asp:TemplateField SortExpression="Date" HeaderText="Date">
                        <EDITITEMTEMPLATE>
                            <asp:TextBox id=txtDate runat="server" Text='<%# Bind("Date", "{0:d}") %>'></asp:TextBox>
                            <?xml:namespace prefix = cc1 /><cc1:CalendarExtender id=txtDate_CalendarExtender runat="server" TargetControlID="txtDate" Enabled="True">
                            </cc1:CalendarExtender>
                        </EDITITEMTEMPLATE>
                        <ITEMTEMPLATE>
                            <asp:Label id=lblDate runat="server" Text='<%# Bind("Date", "{0:d}") %>'></asp:Label>
                        </ITEMTEMPLATE>
                    </asp:TemplateField>
                </COLUMNS>
            </asp:GridView>
            <asp:LinqDataSource id=lds_Holiday runat="server" EnableUpdate="True" EnableDelete="True" TableName="College_Holidays" ContextTypeName="HolidayDataContext">
            </asp:LinqDataSource>

When you run the page it will display as shown in image