Quick Reviews: Display Page as a Popup Window from Grdi View Button Click

This post will show you a demonstration how can you show a page as popup window from GridView Button click event. Let me tell you how to achieve this.

The output of this example is as:

Let starts coding,

ASPX MARKUP :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageAsPopup.aspx.cs" Inherits="Test_Web.PageAsPopup" %>

<!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>Page as Popup</title>
    <script language="javascript" type="text/javascript">

        function ShowPage(id,url) 
        {
            window.showModalDialog(url + '?id=' + id , window, 
                'dialogHeight:500px;dialogWidth:650px;center:yes;help:no;resizable:no;status:no');
        }
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            OnRowDataBound="GridView1_OnRowDataBound" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label ID="lblID" runat="server" Text='<%# Bind("ID")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Country">
                    <ItemTemplate>
                        <asp:Label ID="lblCountry" runat="server" Text='<%# Bind("Country")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="City">
                    <ItemTemplate>
                        <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City")%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <input id="lnkPopup" runat="server" type="button" value="Open Page" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EmptyDataTemplate>
                No record found!
            </EmptyDataTemplate>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

CODE BEHIND :

C# CODE

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var dataTable = new DataTable();
        dataTable.Columns.Add("ID");
        dataTable.Columns.Add("Name");
        dataTable.Columns.Add("Country");
        dataTable.Columns.Add("City");

        dataTable.Rows.Add("1", "Martin", "UK", "London");
        dataTable.Rows.Add("2", "Micheal", "USA", "NewYork");
        dataTable.Rows.Add("1", "Smith", "UAE", "Dubai");

        GridView1.DataSource = dataTable;
        GridView1.DataBind();
    }
}

protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) 
    {
        var linkPopup = (HtmlInputButton)e.Row.FindControl("lnkPopup");
        linkPopup.Attributes.Add("onclick", "ShowPage('" + e.Row.Cells[0] + "','PopupPage.aspx')");
    }
}

VB.NET CODE

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not IsPostBack Then
        Dim dataTable = New DataTable()
        dataTable.Columns.Add("ID")
        dataTable.Columns.Add("Name")
        dataTable.Columns.Add("Country")
        dataTable.Columns.Add("City")

        dataTable.Rows.Add("1", "Martin", "UK", "London")
        dataTable.Rows.Add("2", "Micheal", "USA", "NewYork")
        dataTable.Rows.Add("1", "Smith", "UAE", "Dubai")

        GridView1.DataSource = dataTable
        GridView1.DataBind()
    End If
End Sub

Protected Sub GridView1_OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim linkPopup = DirectCast(e.Row.FindControl("lnkPopup"), HtmlInputButton)
        linkPopup.Attributes.Add("onclick", "ShowPage('" + e.Row.Cells(0) + "','PopupPage.aspx')")
    End If
End Sub

Quick Reviews

March 14, 2013

Display Page as a Popup Window from Grdi View Button Click

ASPX MARKUP :

CODE BEHIND :

No comments:

Post a Comment