ASP.Net – DataGrid – Adding Hyperlink Column

 

Background

There is a dated Black-book web site that I wrote to keep up with people and appointments years ago.

Here is what the Appointments page looks like:

List Appointments

BeforeGrid

Edit Appointment

BeforeEdit

 

Enhancement

Lately, I have found more and more the need to isolate the corresponding web link into its own entry field and not just mushroom it into the comments multi-edit box.

Edit Appointment

AfterEdit

List Appointments

AfterGrid

 

Code

I had a little problem and had to have my brother help me with .Net code to add an hyperlink to a Data Grid.

And, so wanted to place it online for anyone else rusty with ASP.Net

Code line


<asp:DataGrid id="gridContactEventInfo" BorderColor="black" BorderWidth="1" CellPadding="3" AutoGenerateColumns="false" runat="server" font-size="8" width='100%'>

 <HeaderStyle BackColor="#9FBCE3">
 </HeaderStyle>

 <ItemStyle BackColor="#EEF2F7">
 </ItemStyle>
			 
 <AlternatingItemStyle BackColor="#EEEEEE">                                 
 </AlternatingItemStyle>                                 
								  
 <columns>
 
	 <asp:BoundColumn HeaderText="Event" DataField="eventName" /> 


		<asp:TemplateColumn HeaderText="Link" >

			<ItemTemplate>		

			 <asp:HyperLink
					HeaderText="Link" 		
					Text="Link" 
					NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "eventLink") %>'
					Visible="True"
					Target="_blank"
					runat="server"
					> 	
			 </asp:HyperLink>   		    		                         																				
			
			</ItemTemplate>
			
		</asp:TemplateColumn>

	</columns>		

</asp:DataGrid>	

 

Quick Explanation

  1. Added asp:TemplateColumn
  2. Added ItemTemplate
  3. Added asp:HyperLink
    • Added NavigateUrl='<%# DataBinder.Eval(Container.DataItem, “eventLink”) %>’

 

One thought on “ASP.Net – DataGrid – Adding Hyperlink Column

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s