Simple Steps to popup a Gridview using jQuery

Contents

Introduction

Simple 8 steps

Screen Shots

Multiple Popup Support

Browser Compatibility

Complete Code

aspx File which uses a Master file

Code-Behind File .cs

Introduction

This article gives details about how to place a GridView in a popup dialog using jQuery. I read many articles which had jQuery projections to tr and td elements to get the effect of having the GridView in a popup window. But below one is simple and easy. From the reading goggling I have placed the bits & pieces together to get it done. If you have any other views\ additional info on this please free to share it with me.

Using the code

This article gives step by step details on placing a GridView in a popup dialog using jQuery. This uses jQuery methods show & hide to show\close the popup.

Simple 8 steps

Below are simple 8 steps to get popup a GridView on an event (say Button Click Event )

Step 1

Include below styles in your css file or on top of the page

#mask

{

position: fixed;

left: 0px;

top: 0px;

z-index: 4;

opacity: 0.4;

filter: alpha(opacity=40);

background-color: gray;

display: none;

width: 100%;

height: 100%;

}

.popupHead

{

color: White;

font-weight: bold;

font-size: 1.2em;

padding: 3px;

align="center";

}

.popupDim

{

Height=290px;

Width=400px;

z-index: 111;

background-color: White;

position: absolute;

left: 35%;

top: 12%;

border: outset 2px gray;

padding: 5px; display: none;

}

Step 2

Include the below script in the page

</script>

Step 3

Include the javascript functions required to popup and close

show the popup

function ShowPopup() {

$('#mask').show();

$('#<%=pnlpopup.ClientID %>').show();

return false;

}

hide the popup

function HidePopup() {

$('#mask').hide();

$('#<%=pnlpopup.ClientID %>').hide();

}

hide the popup on click of the close button

$(".btnClose").live('click', function () {

HidePopup('pnlpopup');

});

Step 4

Include the below div tag. This tag is required to mask the page before popping up the popup window.

Step 5

Include a Panel (say pnlpopup as panel’s ID) and place the GridView in it. Any other controls to be available on the popup window needs to be placed here within the Panel

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" class="popupDim">

Project List <a id="A1" style="color: white; float: right; text-decoration: none"

class="btnClose" href="#">X</a>

</td>

</tr>

<tr>

<td>

<asp:GridView ID="gvProject" runat="server" AutoGenerateColumns="true">

</asp:GridView>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

Step 6

Include a control say button to popup the GridView

<asp:Button ID="btnShow" runat="server" Text="Show Project" OnClick="btnShow_Click" />

Step 7

Include the below method in the code-behind file

void Popup(bool isDisplay)

{

StringBuilder builder = new StringBuilder();

if (isDisplay)

{

builder.Append("<script language=JavaScript> ShowPopup(); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", builder.ToString());

}

else

{

builder.Append("<script language=JavaScript> HidePopup(); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "HidePopup", builder.ToString());

}

Step 8

On Click of the control where popup is required (here button ‘btnShow’)

à call the Popup method

à bind the grid

à and other required codes to be processed\displayed on the popup window.

Popup(true, "pnlpopup");

DataTable dtProject;

try

{

dtProject = GetProject();

BindProjectGrid(dtProject);

}

catch (Exception ex)

{

throw ex;

}

Screen Shots

I have placed below the screen shots to add on the visual effects.

i. This screen shot displays just the button, on click of which the popup effect will be seen.

ii. On click of the button ‘Show Project’, a window pops up with the ProjectGridView in it.

We can see the background is masked by which we would not be having access to the button ‘Show Project’, the menu there or any other controls in the page

Multiple Popup Support

Suppose if we need more than one popup to be displayed in the page, then we need to have the functions call in a more generic way that give provisions to decide on which area\panel needs to be popped up. so that as per the parameter passed the related required popup is triggered.

To realize this

i. we need to get hold of the client id of the panel control that needs to be popped up

function GetClientID(id, context) {

var el = $("#" + id, context);

if (el.length < 1)

el = $("[id$=_" + id + "]", context);

return el;

}

ii. Pass the client id to the function to say ‘Popup this Panel’ and ‘Close this Panel’.

That means the ShowPopup and HidePopup functions need to have parameters to show\hide the required popup.

function ShowPopupA(idd) {

$('#mask').show();

$('#' + GetClientID(idd).attr("id")).show();

}

function HidePopupA(idd) {

$('#mask').hide();

$('#' + GetClientID(idd).attr("id")).hide();

}

iii. Accordingly the Popup method in the code behind methods needs to be changed to include the parameter for the ClientID

void Popup(bool isDisplay,string id)

{

StringBuilder builder = new StringBuilder();

if (isDisplay)

{

builder.Append("<script language=JavaScript> ShowPopupA('"+id+"'); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPopupA", builder.ToString());

}

else

{

builder.Append("<script language=JavaScript> HidePopupA('" + id + "'); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "HidePopupA", builder.ToString());

}

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">

function ShowPopup() {

$('#mask').show();

$('#<%=pnlpopup.ClientID %>').show();

return false;

}

function HidePopup() {

$('#mask').hide();

$('#<%=pnlpopup.ClientID %>').hide();

}

$(".btnClose").live('click', function () {

HidePopup('pnlpopup');

});

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

<asp:Button ID="btnShow" runat="server" Text="Show Project" OnClick="btnShow_Click" />

</div>

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" class="popupDim">

Project List <a id="A1" style="color: white; float: right; text-decoration: none"

class="btnClose" href="#">X</a>

</td>

</tr>

<tr>

<td>

<asp:GridView ID="gvProject" runat="server" AutoGenerateColumns="true">

</asp:GridView>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</asp:Content>

Code-Behind File .cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Text;

public partial class T_PopupShow : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void BindProjectGrid(DataTable dt)

{

gvProject.DataSource = dt;

gvProject.DataBind();

}

protected DataTable GetProject()

{

DataTable dt = new DataTable();

DataRow dr;

dt.Columns.Add("ProjectID");

dt.Columns.Add("ProjectCode");

dt.Columns.Add("ProjectName");

dt.Columns.Add("ProjectType");

dt.Columns.Add("CustomerName");

dr = dt.NewRow();

dr[0] = "1";

dr[1] = "ISS";

dr[2] = "Issue Support System";

dr[3] = "AD";

dr[4] = "Ericsson";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "2";

dr[1] = "IASR";

dr[2] = "Industry Automation Solution Report";

dr[3] = "EH";

dr[4] = "Sony";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "3";

dr[1] = "Tilda";

dr[2] = "Tilda Processing System";

dr[3] = "EH";

dr[4] = "BlackBerry";

dt.Rows.Add(dr);

return dt;

}

protected void btnShow_Click(object sender, EventArgs e)

{

Popup(true, "pnlpopup");

//DataSet ds;

DataTable dtProject;

//DataTable dtProduct = new DataTable();

try

{

dtProject = GetProject();

BindProjectGrid(dtProject);

}

catch (Exception ex)

{ throw ex; }

}

void Popup(bool isDisplay, string id)

{

StringBuilder builder = new StringBuilder();

if (isDisplay)

{

builder.Append("<script language=JavaScript> ShowPopup(); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", builder.ToString());

}

else

{

builder.Append("<script language=JavaScript> HidePopup(); </script>\n");

Page.ClientScript.RegisterStartupScript(this.GetType(), "HidePopup", builder.ToString());

}

Styles.css

/**** Mask for PopUp Dialog **********/

#mask

{

position: fixed;

left: 0px;

top: 0px;

z-index: 4;

opacity: 0.4;

filter: alpha(opacity=40);

background-color: gray;

display: none;

width: 100%;

height: 100%;

}

/********** popup Heading */

.popupHead

{

color: White;

font-weight: bold;

font-size: 1.2em;

padding: 3px;

align="center";

}

.popupDim

{

Height=290px;

Width=400px;

z-index: 111;

background-color: White;

position: absolute;

left: 35%;

top: 12%;

border: outset 2px gray;

padding: 5px; display: none;

}

History

April 19,2014 Initial Post

Saturday, 19 April 2014

Using the code

Simple 8 steps

History