I want my DataGrid 'Hyperlink Column' links to open a popup window. Please help

[o_Goatee_o]

Hi there At the moment I have a DataGrid which consists of the following columns:

<asp:datagrid id=modLecturersDG runat="server" AutoGenerateColumns="False" CssClass="datagrid">

<HeaderStyle HorizontalAlign="Center" BackColor="WhiteSmoke"></HeaderStyle>

	<Columns>

		<asp:TemplateColumn Visible="False" HeaderText="User ID">
			<ItemTemplate>
					<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.user_id") %>' ID="Label1" NAME="Label1"></asp:Label>			
			</ItemTemplate>
		</asp:TemplateColumn>
		
		<asp:TemplateColumn HeaderText="Lecturer Name">
			<ItemTemplate>
				<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.firstname") %>' ID="Label3" NAME="Label3"/>
				<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.surname") %>' ID="Label5" NAME="Label3"/>	
			</ItemTemplate>
		</asp:TemplateColumn>
		
		<asp:TemplateColumn HeaderText="Office">
			<ItemTemplate>
				<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.office") %>' ID="Label2" NAME="Label3"/>			
			</ItemTemplate>
		</asp:TemplateColumn>

		<asp:TemplateColumn HeaderText="Ext No.">
			<ItemTemplate>
				<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ext") %>' ID="Label4" NAME="Label3"/>
			</ItemTemplate>
		</asp:TemplateColumn>

		<asp:HyperLinkColumn Text="Compose" DataNavigateUrlField="user_id" DataNavigateUrlFormatString="popup_compose.aspx?user_id={0}" HeaderText="Send A Message">
			<HeaderStyle BackColor="LemonChiffon"></HeaderStyle>
			<ItemStyle HorizontalAlign="Center"></ItemStyle>
		</asp:HyperLinkColumn>
	
	</Columns>
	
</asp:DataGrid>

In one of my PHP websites I had links which opened up popup windows by using the following code:

<a href=\\"orderform.php?variation=".$data['variation_id']."\\" onclick=\\"window.open(this.href, 'MoreBikeInfo', 'height=600, width=500, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;\\" >Order Now</a>

So how can I implement that popup system in .NET so that all the links in the Hyperlink Column will open up a small popup containing with this url: popup_compose.aspx?user_id={0}

Any help would be very much appreciated. Many thanks

[CrazyCrane]

You can set the Target property of the HyperLinkColumn to specify the window you want the link to go to. So you could use Target=“_blank” or Target=“_new” to open the link in a new window (can’t remember which; they may both work): e.g.

...
<asp:HyperLinkColumn Text="Compose" Target="_new" DataNavigateUrlField="user_id" ...
...

[o_Goatee_o]

Thanks for the reply

I realise that I can set the target but I’d like to use a method similar to the JavaScript code that I showed above so that it opens a window which has a specified size, position and has all the toolbars removed etc etc

Any ideas?

Thanks

[ses5909]

Instead of using a hyperlink column you could have it be a link button which causes a postback (You’d have to set the commandname).

Then in your code-behind where you handle the ItemCommand Event, check and see if the commandname = that which you assigned. If it does you can do this:

1. Find the id of the thing you want to pop up your hyperlink for.

Response.write(“<script language=javascript> window.open(this.href, 'popup_compose.aspx?user_id=” & id & “', ‘height=600, width=500, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no’);”)

Hope this helps.

[freddydoesphp]

Or in your item databound event add the onclick handler for your Hyperlink column.

Create one javascript function and put it in the head section of the aspx page like

function OpenWin(id) { window.open('http://www.google.com/?id='+id, ‘MoreBikeInfo’, ‘height=600,width=500,top=50,left=50,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=yes,status=no’); return false; } function OpenWin(id) { window.open('http://www.google.com/?id='+id, ‘MoreBikeInfo’, ‘height=600,width=500,top=50,left=50,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=yes,status=no’); return false; }

 		<script language="javascript">
 			function OpenWin(id)
 			{
 		    	window.open('http://www.google.com/?id='+id, 'MoreBikeInfo', 'height=600,width=500,top=50,left=50,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=yes,status=no');
 		    	return false;	    	
 			}
 		</script>
 

Then in the ItemDataBound event use soemthing like

 		private void grd_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
 		{
 			if(e.Item.ItemType == ListItemType.AlternatingItem ||
 				e.Item.ItemType == ListItemType.Item)
 			{
 		    	System.Data.Common.DbDataRecord ddr = (System.Data.Common.DbDataRecord)e.Item.DataItem;
 		    	HyperLink hl = e.Item.Cells[2].Controls[0] as HyperLink;
 		    	hl.Attributes["onclick"] = "OpenWin('"+ddr["au_id"].ToString()+"'); return false;";
 			}
 		}
 

[o_Goatee_o]

Thanks very much for the replies I managed to find this method in the meantime which does actually open a popup window but it also chanages the main page:

<asp:HyperLinkColumn Text="Compose" DataNavigateUrlField="user_id" DataNavigateUrlFormatString="Javascript: window.open('popup_compose.aspx?user_id={0}','MessageCompose','height=600,width=500,top=50,left=50,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=yes,status=no');" HeaderText="Send A Message">
			<HeaderStyle BackColor="LemonChiffon"></HeaderStyle>
			<ItemStyle HorizontalAlign="Center"></ItemStyle>
		</asp:HyperLinkColumn>

So when I click on a link it opens a popup window but it also changes the content of the main window to this:

[object]

And thats all it says.

Is there a way to stop the main page from changing? And why is it changing in the first place?

Many thanks

[ses5909]

Try adding the Target=_new???

[freddydoesphp]

Because the hyperlink column is trying to postback. Add a return false on the end. But it would better to use a method more like I described above.

 <asp:HyperLinkColumn Text="Compose" DataNavigateUrlField="user_id" DataNavigateUrlFormatString="javascript: window.open('popup_compose.aspx?user_id={0}','MessageCompose','height=600,width=500,top=50,left=50,toolbar=no,  menubar=no,location=no,resizable=no,scrollbars=yes,status=no'); return false;" HeaderText="Send A Message">
 			<HeaderStyle BackColor="LemonChiffon"></HeaderStyle>
 			<ItemStyle HorizontalAlign="Center"></ItemStyle>
 		</asp:HyperLinkColumn>
 

[o_Goatee_o]

Hi! Thanks very much for the quick replies.

The only reason why I used that method is because I understood it :o

Your code looks good but I didn’t want to use it without understanding it. If you have the time to explain whats going on then that would be much appreciated But no problem if you haven’t.

Thanks again peeps

[o_Goatee_o]

Hello again, freddydoesphp

I have implemented your solution and its spot on - thank you very much

I don’t quite understand all the code in the ItemDataBound event handler. Would you please give a little explanation. It would be much appreciated.

Cheers

[freddydoesphp]

 private void grd_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
 {
 	//Make sure we are dealing with a row in the grid and not a header item or a footer item
 	 if(e.Item.ItemType == ListItemType.AlternatingItem ||
 		 e.Item.ItemType == ListItemType.Item)
 	{
 		//Each row's data item is actually a DbDataRecord so cast the dataitem for the row to a 
 		//DbDataRecord
 			 System.Data.Common.DbDataRecord ddr = (System.Data.Common.DbDataRecord)e.Item.DataItem;
 
 		//Find the hyperlink control that gets rendered as the HyperLinkColumn's control
 			HyperLink hl = e.Item.Cells[2].Controls[0] as HyperLink;
 
 		//Assign the onclick attribute for the link, which is just a javascript call passing 
 		// in the id of the item we want to pass to the popup
 		    hl.Attributes["onclick"] = "OpenWin('"+ddr["au_id"].ToString()+"'); return false;";
 	}
 }
 

Okay well this event is triggered for each item in the datagrid including headeritems and footer items.

So the first if clasues makes sure we are dealing with a regular row.

The DbDataRecord line is just getting the DataItem for the current row so we have access to the id to pass to the javascript function.

The HyperLink line gets a refernece to the HyperLink control that lives in the cell which is specified by the index of where it lives in the collection of cells for the row.

Now we just add the javascript onclick handler to the item so its there when it gets rendered.

[o_Goatee_o]

Excellent, thank you very much

I can now confidently use this code in my assignmnet :tup:

I am basically using the pop for a form where the user can compose and send a message to the user that was listed in the datagrid.

Thanks again