Click here to Skip to main content
13,252,537 members (58,974 online)
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 11 Jul 2006

Popup window for the GridView

, 11 Jul 2006
Rate this:
Please Sign up or sign in to vote.
How to create a popup window for the GridView control.

Sample Image - gridview_popup.jpg


Sometimes it is useful to display not all the information for a data record in the GridView. For example, to consume less space for the GridView. When the user needs the detailed information for a record, you can display it in a popup-window.

Binding a DataTable to the GridView

First, we need a GridView with some data rows. As we don’t want to use a database, we create a new DataTable on the fly and bind it to the GridView. Here is the source code for this task (in the file Default.aspx.vb):

Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack = False Then
        End If
    End Sub
    Sub bindGridView()
        Dim objDT = New DataTable("Mitarbeiter")
        objDT.Columns.Add("ID", GetType(String))
        objDT.Columns.Add("Name", GetType(String))
        objDT.Columns.Add("Tel", GetType(String))
        Dim objDR As DataRow

        objDR = objDT.NewRow
        objDR("ID") = "1"
        objDR("Name") = "Florian"
        objDR("Tel") = "123"

        ' Add more rows …


        GridView1.DataSource = objDT
     End Sub
End Class

Creating a template field with the hyperlink

Next, we create a template field that holds the hyperlink to the popup window as well as a picture. Here is the generated code in the file Default.aspx:

<asp:GridView ID="GridView1" runat="server" 

  Style="left: 84px; position: relative; top: 50px"> 
… Here goes the template field …

Here is the code after creating an additional template field for the hyperlink and the picture:

<asp:GridView ID="GridView1" runat="server" 

     Style="left: 84px; position: relative; top: 50px">
            <asp:TemplateField HeaderText="">
                <a href="javascript:openPopup('Info.aspx?id=<%# Eval("ID") %>')">
                   <img src="pics/info.gif" border=0px width=13px/></a>

Take a look at the hyperlink code:

"javascript:openPopup('Info.aspx?id=<%# Eval("ID") %>')"

Here, we call a JavaScript function openPopup that takes a string as a parameter. This string contains the name of the popup page (Info.aspx) and a query string with the ID from the current record. We get the ID for the current record using Eval(“id”).

The JavaScript function

Now, we add a JavaScript function to the head section of the file Default.aspx. Here is the code:

<script language="javascript">
function openPopup(strOpen)
    open(strOpen, "Info", 
         "status=1, width=300, height=200, top=100, left=300");

The third parameter defines how and where the popup window will appear on the screen.

The popup window

The popup window will be an ASPX-file called Info.aspx that displays some information about the selected record. Here is the code for the PageLoad event:

Partial Class Info
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack = False Then
            lblDebug.Text = Request.QueryString("id")
            lblInfo.Text = "Here is some important info about: " + _
        End If
    End Sub
End Class


The problem about web pages is, you don’t have enough space to display everything and everywhere. So, display only the main information in the GridView. When the user needs detailed information about a record, you can open a popup window.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Germany Germany
Florian works as consultant for change- and configuration management for about 7 years. In this environment he is often forced to work with unix, perl and shell scripts.

For more information about change- and configuration management (espacially Serena Dimensions) visit:

For video tutorials about, ajax, gridviews, ... (in german) visit:

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Avik Ghosh2228-Feb-13 21:47
memberAvik Ghosh2228-Feb-13 21:47 
QuestionIf statement Pin
Member 949904416-Oct-12 8:48
memberMember 949904416-Oct-12 8:48 
Questionuse button Pin
Member 348097612-Jun-12 11:56
memberMember 348097612-Jun-12 11:56 
Questioncan u pls convert the code to c# .. Pin
dani99el2-Jan-08 16:52
memberdani99el2-Jan-08 16:52 
AnswerRe: can u pls convert the code to c# .. Pin
Amit Agarrwal16-Apr-08 22:31
memberAmit Agarrwal16-Apr-08 22:31 
GeneralUsing database Pin
aluizs112-Aug-07 13:57
memberaluizs112-Aug-07 13:57 
GeneralI want to know that Pin
Tej's21-Jul-07 18:58
memberTej's21-Jul-07 18:58 
GeneralRe: I want to know that Pin
fstrahberger21-Jul-07 22:32
memberfstrahberger21-Jul-07 22:32 
GeneralPopup window for the GridView Pin
Fadao6-Jun-07 9:00
memberFadao6-Jun-07 9:00 
GeneralRe: Popup window for the GridView Pin
fstrahberger21-Jul-07 22:28
memberfstrahberger21-Jul-07 22:28 
Generalgridview header Pin
o5ama14-Aug-06 19:23
membero5ama14-Aug-06 19:23 
AnswerRe: gridview header Pin
fstrahberger15-Aug-06 0:21
memberfstrahberger15-Aug-06 0:21 
GeneralRe: gridview header Pin
ayeleteric23-Nov-06 5:09
memberayeleteric23-Nov-06 5:09 
GeneralThanx! Pin
Ashish Nijai3-Aug-06 5:44
memberAshish Nijai3-Aug-06 5:44 
Generalgrammer Pin
StevenMcD12-Jul-06 22:24
memberStevenMcD12-Jul-06 22:24 
GeneralRe: grammer Pin
fstrahberger12-Jul-06 23:01
memberfstrahberger12-Jul-06 23:01 
GeneralReply Pin
Member 23384945-Apr-14 23:36
memberMember 23384945-Apr-14 23:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 11 Jul 2006
Article Copyright 2006 by fstrahberger
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid