[RESOLVED] pass child window value to parent

[jlbantang]

hi team, i open a lookup window through javascript:window.open(x,y,z). on that lookup window the user will search and the data will be displayed in gridview.

open child window

<input
                     id="lookupButton" class="button_style" style="width: 30px; height: 20px" type="button" onclick="window.open('lookup.aspx','xxx','width=800,height=500,menubar=no,status=no')"

the gridview will contain columns for id, name, address,fax and tel. each of these column will be pass to the parent form namely idtextbox,addresstexbox, faxtextbox and teltextbox.

note that the id will be a hidden column in the gridview and a hidden type inputbox in the parent.

<asp:GridView ID="GridView1" runat="server" Width="95%"  AllowPaging="True" AutoGenerateColumns="False" GridLines="None" PageSize="10"  >
                     <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
    
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate><asp:Label ID="idlabel" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate><asp:Label ID="namelabel" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                <asp:TemplateField HeaderText="Address">
                    <ItemTemplate><asp:Label ID="addresslabel" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                <asp:TemplateField HeaderText="Fax">
                    <ItemTemplate><asp:Label ID="faxlabel" runat="server"></asp:Label>
                    </ItemTemplate>                
                </asp:TemplateField>
                
                <asp:TemplateField HeaderText ="Tel">
                    <ItemTemplate>
                    <asp:Label ID="tellabel" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                </Columns>
                </asp:GridView>

[gep13]

Hey,

There are a number of ways that you could do this:

1) Session Variables
2) JavaScript - reference the parent window using parent.opener

Gary

[jlbantang]

remind me if im not correct but when you use the session variable requires parent window to reload and it becomes less efficient in terms of network trips. On the other hand javascript with parent.opener will do much the requirement only that i cant find sample along with the grid. i would appreciate if someone fill in the "missing piece" from the code above.

thanks.

[gep13]

You are correct, in order to use the Session variables, in your code behind, you would need to post back to the server, where as with JavaScript, you could access everything on the client side. The only thing would be, that if you wanted to update items within your GridView, that isn't going to be easy on the client side, and should really be done on the server.

How about something like this:

http://weblogs.asp.net/rajbk/archive...pextender.aspx

This is just one example, there are a few, but it shows a different approach that you could take.

Gary

[jlbantang]

Hi Gary, what I believed is my requirement is a fair simple. Please have a look at the image.


So far I have the child window along with data search on it and displayed in gridview. But I just cant find ways how to add code where it will pass the selected row to parent window.


Thanks for dropping and the tutorial link.

[motil]

did you google your question ?

i think this article explain exactly what you need.

[jlbantang]

@motil: I already check that sample and I would say lots more similar to it. Most of it uses inputbox or dropdownlist and pass the value to parent. Thats work fine indeed that is what im trying to achieve. But in my case I have a gridview in child window and the passing of value to parent will wired up under the button located in the first column of child window gridview.

[gep13]

Ok, as a very crude example, have a look at the following:

WebForm1.aspx (the parent)

<&#37;@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication4.WebForm1" %>

<!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></title>
    <script type="text/javascript" language="javascript">
        function openWindow() {
            window.open('WebForm2.aspx','Suppliers','width=550,height=170,left=150,top=200,toolbar=1,status=1');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
        <input type="button" value="Search" style="width: 99px" onclick="openWindow();" />
    </div>
    </form>
</body>
</html>

WebForm2.aspx (the child)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication4.WebForm2" EnableEventValidation="false" %>

<!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></title>
    <script type="text/javascript" language="javascript">
        function GetRowValue(id, name, telephone, fax) {
            window.opener.document.getElementById("TextBox4").value = id;
            window.opener.document.getElementById("TextBox1").value = name;
            window.opener.document.getElementById("TextBox2").value = telephone;
            window.opener.document.getElementById("TextBox3").value = fax;
            window.close();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        <Columns>
        <asp:TemplateField>
                    <AlternatingItemTemplate>
                <asp:Button ID="btnSelect" runat="server" Text="Select" />
            </AlternatingItemTemplate>
            <ItemTemplate>
                <asp:Button ID="btnSelect" runat="server" Text="Select" />
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

WebForm2.aspx.vb

Public Partial Class WebForm2
    Inherits System.Web.UI.Page

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

        Dim suppliers As New List(Of Supplier)
        suppliers.Add(New Supplier("1", "Supplier A", "123", "321"))
        suppliers.Add(New Supplier("2", "Supplier B", "456", "654"))
        suppliers.Add(New Supplier("3", "Supplier C", "789", "987"))

        Me.GridView1.DataSource = suppliers
        Me.GridView1.DataBind()
    End Sub

    Public Class Supplier

        Private _id As String
        Public Property ID() As String
            Get
                Return _id
            End Get
            Set(ByVal value As String)
                _id = value
            End Set
        End Property

        Private _name As String
        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property


        Private _telephone As String
        Public Property Telephone() As String
            Get
                Return _telephone
            End Get
            Set(ByVal value As String)
                _telephone = value
            End Set
        End Property

        Private _fax As String
        Public Property Fax() As String
            Get
                Return _fax
            End Get
            Set(ByVal value As String)
                _fax = value
            End Set
        End Property

        Public Sub New()

        End Sub

        Public Sub New(ByVal id As String, ByVal name As String, ByVal telephone As String, ByVal fax As String)
            Me._id = id
            Me._name = name
            Me._telephone = telephone
            Me._fax = fax
        End Sub
    End Class

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            'assuming that the required value column is the second column in gridview
            DirectCast(e.Row.FindControl("btnSelect"), Button).Attributes.Add("onclick", "javascript:GetRowValue('" & e.Row.Cells(1).Text & "', '" & e.Row.Cells(2).Text & "', '" & e.Row.Cells(3).Text & "', '" & e.Row.Cells(4).Text & "')")
        End If
    End Sub
End Class

Couple things to look out for:

1) I had to put this on WebForm2:

EnableEventValidation="false"

So you will need to be careful and validate the entries you are putting back to the parent.

2) I am hardcoding the ID's of the controls in the parent page. This might be ok, but you might also need to control this.

Hope that all helps!!

Gary

[jlbantang]

kodus for nailing it out. Except that I made some minor change in RowDataBound.

a = e.Row.DataItem("id") & "', '" & e.Row.DataItem("name") & "', '" & Strings.Replace(_address, vbCrLf, "_") & "', '" & e.Row.DataItem("fax") & "','" & e.Row.DataItem("tel")


 DirectCast(e.Row.FindControl("Button4"), Button).Attributes.Add("onclick", "javascript:GetRowValue('" & a & "')")

Now the issue comes in address break line. And GetRowValue() will not work with carriage return. As a workaround I uses the _ (underscore) char which will be use as delimiter in javascript replace() for replacing break lines.

This how it work in GetRowValue()

 function GetRowValue(id, name, address, telephone, fax) {
            window.opener.document.getElementById("idTextBox").value = id;
            window.opener.document.getElementById("nameTextBox1").value = name;
            window.opener.document.getElementById("addressTextBox").value = address.replace(/_/g,"\n");
            window.opener.document.getElementById("telTextBox").value = telephone;
            window.opener.document.getElementById("faxTextBox").value = fax;
            window.close();
        }

[gep13]

kodus for nailing it out.

Not a problem at all, it was actually quite interesting figuring it out.

a = e.Row.DataItem("id") & "', '" & e.Row.DataItem("name") & "', '" & Strings.Replace(_address, vbCrLf, "_") & "', '" & e.Row.DataItem("fax") & "','" & e.Row.DataItem("tel")


 DirectCast(e.Row.FindControl("Button4"), Button).Attributes.Add("onclick", "javascript:GetRowValue('" & a & "')")

Yip, it makes sense that you would have had to edit this to get your specific information out.

Now the issue comes in address break line. And GetRowValue() will not work with carriage return. As a workaround I uses the _ (underscore) char which will be use as delimiter in javascript replace() for replacing break lines.

This how it work in GetRowValue()

 function GetRowValue(id, name, address, telephone, fax) {
            window.opener.document.getElementById("idTextBox").value = id;
            window.opener.document.getElementById("nameTextBox1").value = name;
            window.opener.document.getElementById("addressTextBox").value = address.replace(/_/g,"\n");
            window.opener.document.getElementById("telTextBox").value = telephone;
            window.opener.document.getElementById("faxTextBox").value = fax;
            window.close();
        }

Are you using a TextArea on the client side for the Address, or are you using a standard input of type text? You might need to HtmlEncode the string, and then put it into the TextBox.

Gary

[jlbantang]

Hi Gary,

I updated my post and it seems the workaround works perfectly after using javascript replace in GetRowValue(). Im using asp:textbox for the address.

Totally cool.

[gep13]

Hey,

Glad to hear that you got it all working the way you want it!!

Can you remember to mark your thread as resolved?

Thanks

Gary

[jlbantang]

There it goes. Oops Im out of giving credits I wish to give u one for this.

[gep13]

Not a problem at all, it was an interesting one to work on.