Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

Introduction

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 
    grid.DataBind() 

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 
FillGrid() 
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() 
Myreader.Close() 

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 

Try

 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 = 
       window.dialogArguments;
} 
opener.ReloadPage();
    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)
FillGrid()

End Sub

License

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

Share

About the Author

janeshh
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

Comments and Discussions

 
QuestionNot working with script manager Pinmemberkkbkrishna4-Apr-08 2:17 
GeneralCheers PinmemberTeaTime29-Nov-07 4:02 
QuestionException Handling PinmemberPedr026-Nov-07 22:37 
AnswerRe: Exception Handling Pinmemberjaneshh27-Nov-07 0:14 

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
Web01 | 2.8.140922.1 | Last Updated 20 Nov 2007
Article Copyright 2007 by janeshh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid