This is a small tip which demonstrates the functionality to open a popup (with details page) when the user clicks on any link in a particular column of GridView. Part-1 contains code for default.aspx and Part-2 (next post) contains the rest of the code.
The beauty of the tip is that there exists no code in code-behind (at UI level) and everything is automatically taken care by ObjectDataSource control.
The page (default.aspx) is designed with the following layout:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
<script language="javascript">
function openPopup(strOpen)
{
open(strOpen, "Info", "status=1, width=300, height=200, top=100, left=300");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text=’<%# Bind("ID") %>‘></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text=’<%# Bind("ID") %>‘></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text=’<%# Bind("Name") %>‘></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="<%# Eval("ID", "javascript:openPopup(‘EmpDetails.aspx?ID={0}’)") %>"
Text=’<%# Bind("Name") %>‘></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetEmpList"
TypeName="Employee"></asp:ObjectDataSource>
</form>
</body>
</html>
<!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>
<script language="javascript">
function openPopup(strOpen)
{
open(strOpen, "Info", "status=1, width=300, height=200, top=100, left=300");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text=’<%# Bind("ID") %>‘></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text=’<%# Bind("ID") %>‘></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text=’<%# Bind("Name") %>‘></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="<%# Eval("ID", "javascript:openPopup(‘EmpDetails.aspx?ID={0}’)") %>"
Text=’<%# Bind("Name") %>‘></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetEmpList"
TypeName="Employee"></asp:ObjectDataSource>
</form>
</body>
</html>
See Part 2 for rest of the code
——–
UPDATE: Page refresh upon closing a popup is published here (along with source code) http://jagchat.spaces.live.com/blog/cns!41050F68F010A662!1184.entry
——–
thanks
Jag
Jagadish Pulakhandam's 