How to Popup a Customized Window from a GridView via OnClientClick()
2.60/5 (3 votes)
Putting a customized popup window in a GridView in ASP.NET using C#
Introduction
I was searching for a quick way to add a customizable popup into a GridView, and after Googling for 'GridView Popup' and slowly losing patience, I realised I needed to make my own and that I needed to use JavaScript (but wanting to reuse code across a site without retyping it in each time), so I put this bit of code together.
Now that I have used it and am happy with the results, I thought I would share this with the world, just in case it could save someone else some time!
The Code
Place the code in your Helper.cs class (that's where I place it so I can reuse it over the whole site), or just put it in the background code.
/// <summary>
/// Use this to Create a Popup Url in a gridview
/// For example sending CreatePopupUrl(600,450,-1,-1,false,false,false,false,
/// false,false,"http://www.google.com/{0}","video")
/// this would make a link to http://www.google.com/video
/// with a 600 pixel high, 460 pixel wide window,
/// centred in the window, with no scrollbars, no menubar, not resizable
/// no toolbar, no nav bar, no status bar.
/// </summary>
/// <param name="windowHeight">Enter the height of the popup window
/// (eg, 600)</param>
/// <param name="windowWidth">Enter the width of the popup window
/// (eg, 460)</param>
/// <param name="leftPosition">Enter -1 in left and top position to
/// automatically centre the popup in the window</param>
/// <param name="topPosition">Enter -1 in left and top position to
/// automatically centre the popup in the window</param>
/// <param name="showScrollbars">If you want to show scrollbars, enter 'True'
/// <param name="showMenuBar">If you want to show the Menubar,
/// enter 'True'</param>
/// <param name="isResizable">If you want the window to be resizable,
/// enter 'True'</param>
/// <param name="showToolbar">If you want to show the toolbar,
/// enter 'True'</param>
/// <param name="hasLocation">If you want the window to have a
/// Navigation bar, enter 'True'</param>
/// <param name="showStatus">If you want to show status, enter 'True'</param>
/// <param name="url">Enter the string of the url
/// (eg http://www.google.com/{x}) (this will replace the {x}
/// with what index your args are in) </param>
/// <param name="args">Enter the parameters you want to add to the url. </param>
/// <returns></returns>
public static string CreatePopupUrl(double windowHeight,
double windowWidth,
double leftPosition,
double topPosition,
bool showScrollbars,
bool showMenuBar,
bool isResizable,
bool showToolbar,
bool hasLocation,
bool showStatus,
string url,
params object[] args)
{
string strShowScrollbars = showScrollbars ? "yes" : "no";
string strShowMenuBar = showMenuBar ? "yes" : "no";
string strIsResizable = isResizable ? "yes" : "no";
string strShowToolbar = showToolbar ? "yes" : "no";
string strHasLocation = hasLocation ? "yes" : "no";
string strShowStatus = showStatus ? "yes" : "no";
url = string.Format(url, args);
double finalLeftPosition = leftPosition;
double finalTopPosition = topPosition;
if (leftPosition == -1)
{
//Automatically Horizontally centre the window
//If the Screen not null
try
{
if (Screen.PrimaryScreen != null)
{
finalLeftPosition =
(((double)Screen.PrimaryScreen.Bounds.Width / 2) -
(windowWidth / 2));
}
}
catch (Exception)
{
//If there was an error, just set the Final Positions to 0
finalLeftPosition = 0;
}
}
if (topPosition == -1)
{
//Automatically Vertically centre the window
//If the Screen not null
try
{
if (Screen.PrimaryScreen != null)
{
finalTopPosition =
(((double)Screen.PrimaryScreen.Bounds.Height / 2) -
(windowHeight / 2));
}
}
catch (Exception)
{
//If there was an error, just set the Final Positions to 0
finalTopPosition = 0;
}
}
string str = "window.open('" + url + "','','scrollbars=" + strShowScrollbars +
",menubar=" + strShowMenuBar +
",height=" + windowHeight +
",width=" + windowWidth +
",resizable=" + strIsResizable +
",toolbar=" + strShowToolbar +
",location=" + strHasLocation +
",status=" + strShowStatus +
",left=" + finalLeftPosition +
",top=" + finalTopPosition + "')";
return str;
}
How I Use it
The code below is just to show where I put it in a GridView. As you can see, I put it in the OnClientClick area. I found this was where it worked best for me. I use it mainly for sending encrypted text to a page, but below, I have just used Google Video and Maps as an example.
As you can see, I have used -1 for Left position and -1 for Top position. This is how I can tell the code to try and centre the popup window in the screen.
If I send a location like 30 and 30, then it would be 30 pixels in and 30 pixels down from the top left corner of the screen.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Visible="True"
CellPadding="4" ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="LbtnGoogle1" runat= "server"
OnClientClick='
<%#
CreatePopupUrl( 600
, 450
, -1 //left position
, -1 //top position
, false
, false
, false
, false
, false
, false
, "http://www.google.com/{0}"
, "video"
)
%>'>Google Video</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="LbtnGoogle2" runat= "server"
OnClientClick='
<%#
CreatePopupUrl( 600
, 450
, 30 // left position
, 30 // top position
, false
, false
, false
, false
, false
, false
, "http://www.google.com/{0}"
, "maps")
%>'>Google Maps</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I hope that someone will find this helpful.
History
- 15th October, 2009: Initial post
- 16th October, 2009: Added source code
- 19th October, 2009: Updated source code