Working with POPUPs in ASP.Net

Wednesday, September 10, 2008
In an application I have a requirement like in this way. There are some details about USER like User Name, First Name, Last Name, Email, Mobile Number, and City. After that I have Four buttons with named as Search, Clear, Save, Delete.
You can see the Screen Shot




Here the main functionality is when I click on Search button a POPUP Window has to be opened that window contains search functionality for users. When I open the window it will provide a functionality to search user by User Name, City Name. When I provide User Name or City Name and clicked on Search button it will display all related details in Grid. And this grid has to be allowing me to select a row. When I clicks on any row of the grid automatically the grid has to be closed and a selected row detail has to be displayed in the Main Form where search button located.

Search Screen shot




In order to achieve this functionality I used Java script with DOM, which allow me to send the search results to Parent window when user clicks on the grid and to close pop window.

search results




Grid contains hyper links when user clicks on that one it will call a Java script function. Here is the sample code..!

<asp:TemplateField HeaderText="User Name">
<ItemTemplate>
<a style="cursor: hand" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'"
name="UserName" onclick="javascript:CalltoParent(this)" runat="server"
id="uname">
<%# DataBinder.Eval(Container.DataItem, "UserName") %>
</a>
</ItemTemplate>
</asp:TemplateField>

When user clicks it will call “CalltoParent” and here we are passing the Current Node value.
Java Script function can be written as..!



 function CalltoParent(user)
{
if(window.opener!=null){
if(window.opener.document.getElementById('txtuname')!=null){
var uval=user.parentNode.parentNode;
window.opener.document.getElementById('txtuname').value = uval.childNodes[0].childNodes[0].innerText;
window.opener.document.getElementById('txtfname').value = uval.childNodes[1].childNodes[0].innerText;
window.opener.document.getElementById('txtlanme').value = uval.childNodes[2].childNodes[0].innerText;
window.opener.document.getElementById('txtmail').value = uval.childNodes[3].childNodes[0].innerText;
window.opener.document.getElementById('txtmobile').value = uval.childNodes[4].childNodes[0].innerText;
window.opener.document.getElementById('txtcity').value = uval.childNodes[5].childNodes[0].innerText;
window.close();
}
return true;
}
}




Source Code

2 comments:

Omar Abdelrahim said...

teslm :)

വിവേക് said...

hi ram

canu ensure that ur javascipt pop up in ur blog

work with firefox

the childnodes count
6:18 PM
its work fine in IE

but not in firefox