Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Sat, 01-Nov-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
38050
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Extending Grid View Control of ASP .NET

Hareshambaliya
Posted by under ASP.NET category on for Advance level | Views : 7480 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
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 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 ''' <summary> ''' Called when databound in display mode ''' </summary> 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 ''' <summary> ''' Called when databound in edit mode ''' </summary> 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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
  <asp:GridView ID="grvHoliday" runat="server" AutoGenerateColumns="False" DataSourceID="lds_Holiday"
                AutoGenerateEditButton="True" DataKeyNames="Holiday_ID">
                <RowStyle HorizontalAlign="Left" VerticalAlign="Top" BorderWidth="0px" />
                <EditRowStyle VerticalAlign="Top" HorizontalAlign="Left" BorderWidth="0px" />
                <Columns>
                    <CustomField:DeleteButtonField>
                    </CustomField:DeleteButtonField>
                    <asp:BoundField DataField="Holiday_ID" HeaderText="Holiday_ID" ReadOnly="True" SortExpression="Holiday_ID"
                        Visible="False" />
                    <asp:TemplateField HeaderText="Title" SortExpression="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 Height="60px" Width="300px" DataField="Description" HeaderText="Description">
                    </CustomField:LongTextField>
                    <%--<asp:TemplateField HeaderText="Description" SortExpression="Description">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtDescription" runat="server" Text='<%# Bind("Description") %>' TextMode="MultiLine"></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblDescription" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>--%>
                    <asp:TemplateField HeaderText="Date" SortExpression="Date">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtDate" runat="server" Text='<%# Bind("Date", "{0:d}") %>'></asp:TextBox>
                            <cc1:CalendarExtender ID="txtDate_CalendarExtender" runat="server" Enabled="True"
                                TargetControlID="txtDate">
                            </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" ContextTypeName="HolidayDataContext"
                TableName="College_Holidays" EnableDelete="True" EnableUpdate="True">
            </asp:LinqDataSource>
</body>
</html>

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

Page copy protected against web site content infringement by Copyscape
About the Author

Hareshambaliya

Full Name: Haresh Ambaliya
Member Level: Starter
Member Status: Member
Member Since: 11/11/2008 3:25:29 AM
Country: India

I was born in 25th March ,1983 - India. I pursue my bachelor of engineering in Information Technologies from C. U. Shah Engineering, Saurashtra University. I am very honest and active in my life. I started my career in Intelligent Business Solution Development India Pvt. Ltd. , Ahmedabad, Which is subsidiary of IBSG Inc., Celebration, Florida - USA. I worked 8 Months for IBSG Inc. Unfortunately due to recession in USA the IBSGI was totally shutdown. After shutdown of IBSGI I started to work for Rapid Infosoft (Ahmedabad), I have worked 6 to 7 months for Rapid Infosoft. Currently I am working for Kemchho Infotech Pvt. Ltd. (Ahmedabad). Skills: ASP .Net, C# .Net, VB .Net, DotNetNuke CMS, LINQ, Entity Framework Model First and Code First, WCF, App Febric, IIS6, IIS7, IIS8, SQL Server 2000,2005, 2008, 2008R2, 2012, SSIS, SSRS, eCommerce CMS like nopCommerce.
Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)