Click here to Skip to main content
13,287,116 members (56,703 online)
Click here to Skip to main content
Add your own
alternative version


30 bookmarked
Posted 20 Nov 2007

Populating Parent Grid from Popup Window Using Ajax

, 20 Nov 2007
Rate this:
Please Sign up or sign in to vote.
This article discusses a way of communicating to a web page from its popup or child window, both on a server and client level. One way a grid is populated from a popup: when editing rows in a grid, you show the edited records in the parent simutaneously without postback from a child popup window.


I saw a lot of requests for getting a control over the parent web page from a pop page, so I decided to write this article. This article explains how to call a parent server level function from a popup window using AJAX.

For this I am using the population of a grid as an example. Here I have a datagrid which contains buttons for editing each row. When I click the button, another popup (popup.aspx) pops up containing the fields of the selected row.

After editing the row the grid will refresh from the popup window without posting back to the server. I used the Ajax functionality to do this.

Using the Code

Here am using two ASPX pages.

  1. Default.aspx
  2. popup.aspx

I am maintaining a hidden button (btnReload) just to fill the grid. On loading the function of the default.aspx I am populating the grid from Northwind database.

Private Function FillGrid() As Boolean 

    Dim Sqlstring As String = " select top 10 customerID,companyname," +
        "contactname from customers" 
    Dim Myreader As SqlDataReader = Nothing 
    Connect_SQLDataReader(Myreader, Sqlstring, errmsg) 
    grid.DataSource = Myreader 

End Function

And on the Onload event of the default page I am registering a JavaScript function ReloadPage() which will refer to the reload button click event. This does the trick.

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

ScriptManager.RegisterStartupScript(Me.btnReload, Me.GetType, "xxxxx", 
    "function ReloadPage(){" & Page.ClientScript.GetPostBackEventReference(
    Me.btnReload, Nothing) & "}", True) 
If Page.IsPostBack = False Then 
End If 

End Sub

Please note you have to do this outside the Page.IsPostBack condition because we have to register the script for every post for stabilityEnsure, that you had put the grid in the Ajax Update Panel.

While clicking on the link button of the grid, I am popping up the new ASPX page popup.aspx, where I am taking the query string of the rowID and populating what is textboxed for editing purposes.

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

If Page.IsPostBack = False Then 
Dim Sqlstring = "select companyname,
    contactname from customers where customerID='" & 
    Request.QueryString("id") & "'" 
Dim Myreader As SqlDataReader = Nothing 
Connect_SQLDataReader(Myreader, Sqlstring, errMsg) Myreader.Read() 

txtCompanyName.Text = Myreader(0).ToString() 
txtContactName.Text = Myreader(1).ToString() 

End If 

End Sub

Now, upon clicking the save button in the popup window I am editing the data to the backend and calling a JavaScript function, ReloadParent().

Protected Sub Button1_Click(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Button1.Click 

Dim Sqlstring = "update customers set companyname='" & 
    txtCompanyName.Text & "', contactname='" & txtContactName.Text & 
    "' where customerID='" & Request.QueryString("id") & "'" 
Dim result As Integer 


 Connect_SQLNonQuery(result, Sqlstring, errMsg) 

Catch ex As Exception 

End Try 

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "Success",
    "ReloadParent('Records Updated')", True) 

End Sub

Let's see what the ReloadParent() does.

function ReloadParent(msg) 
    var opener;
    if (window.opener){opener = window.opener;} else{opener = 
    alert('Records Updated'); //self.close(); 

Here I am calling the parent JavaScript fucnction opener.ReloadPage(); which will call the btnReload click event of the parent page. In the btnReload we just call the Fillgrid() function like this:

Protected Sub btnReload_Click(ByVal sender As Object,
    ByVal e As System.EventArgs)

End Sub


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


About the Author

Software Developer (Senior) Emirates Group
United Arab Emirates United Arab Emirates
I am working as a Senior .NET Developer in Emirates Group(Mercator) ,Dubai
Expertise in C,C++,C#,VB,.NET,Ajax,XML,Web Service,Syncfusion..etc

You may also be interested in...


Comments and Discussions

QuestionNot working with script manager Pin
kkbkrishna4-Apr-08 3:17
memberkkbkrishna4-Apr-08 3:17 
GeneralCheers Pin
TeaTime29-Nov-07 5:02
memberTeaTime29-Nov-07 5:02 
QuestionException Handling Pin
Pedr026-Nov-07 23:37
memberPedr026-Nov-07 23:37 
AnswerRe: Exception Handling Pin
janeshh27-Nov-07 1:14
memberjaneshh27-Nov-07 1:14 

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
Web02 | 2.8.171207.1 | Last Updated 20 Nov 2007
Article Copyright 2007 by janeshh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid