Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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
            bindGridView()
        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"
        objDT.Rows.Add(objDR)
        '-------------------------------------------

        ' Add more rows …

        '-------------------------------------------

        GridView1.DataSource = objDT
        GridView1.DataBind()
     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 …
</asp:GridView>

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">
        <Columns>
            <asp:TemplateField HeaderText="">
            <ItemTemplate>
                <a href="javascript:openPopup('Info.aspx?id=<%# Eval("ID") %>')">

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");
}
</script>

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: " + _
                           Request.QueryString("id")
        End If
    End Sub
End Class

Why???

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.

License

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

Share

About the Author

fstrahberger
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: www.venco.de
 
For video tutorials about asp.net, ajax, gridviews, ... (in german) visit: www.siore.com

Comments and Discussions

 
GeneralMy vote of 5 PinmemberAvik Ghosh2228-Feb-13 20:47 
QuestionIf statement PinmemberMember 949904416-Oct-12 7:48 
Questionuse button PinmemberMember 348097612-Jun-12 10:56 
Questioncan u pls convert the code to c# .. Pinmemberdani99el2-Jan-08 15:52 
AnswerRe: can u pls convert the code to c# .. PinmemberAmit Agarrwal16-Apr-08 21:31 
GeneralUsing database Pinmemberaluizs112-Aug-07 12:57 
GeneralI want to know that PinmemberTej's21-Jul-07 17:58 
GeneralRe: I want to know that Pinmemberfstrahberger21-Jul-07 21:32 
GeneralPopup window for the GridView PinmemberFadao6-Jun-07 8:00 
GeneralRe: Popup window for the GridView Pinmemberfstrahberger21-Jul-07 21:28 
Generalgridview header Pinmembero5ama14-Aug-06 18:23 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140902.1 | Last Updated 11 Jul 2006
Article Copyright 2006 by fstrahberger
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid