Extending the GridView control





5.00/5 (2 votes)
Extending Grid View Control of ASP .NETIf you want to modify some functionality of existing Grid View control of ASP .Net then you always have the
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