Data grid row bind without post back and AJAX

Introduction

This article basically describes how to get a DataGrid row value without postback or calling AJAX.

Background

There are scenarios when we have to populate fields from a child window to a parent window after selecting a particular row from a DataGrid. The idea is to pass the DataGrid value to the parent window without postback or calling AJAX. I did ask this question in different forums, but everyone ended up suggesting to use AJAX. After some searching and exploring, I found some trick to do this otherwise.

Using the code

I have created a scenario in which the parent window has some fields that can be populated from the child window. After getting the search results on the DataGrid, we select the result and the parent window fields will be populated with the selected result.

This can be done by using the OnItemDataBound event. In the event handler function, we register the OnMouseOver, OnMouseOut functions for decoration purposes, and the OnClick function registers a SetMouseClick function, passing the parameters to the parent window.

 private void dgEmployee_ItemDataBound(object sender,
 System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
         ListItemType.AlternatingItem)
{
e.Item.Attributes["onmouseover"] = "javascript:setMouseOverColor(this);";
e.Item.Attributes["onmouseout"] = "javascript:setMouseOutColor(this);";
string FirstName = e.Item.Cells[0].Text.ToString();// first column value
string LastName = e.Item.Cells[1].Text.ToString() ;// Second
string HireDate = e.Item.Cells[2].Text.ToString() ;// third
string Job = e.Item.Cells[3].Text.ToString() ;// fourth
string Publisher = e.Item.Cells[4].Text.ToString() ; // fifth
string City = e.Item.Cells[5].Text.ToString() ; // sixth
e.Item.Attributes["onclick"] =
"javascript:setMouseClick('"+FirstName+"','"+LastName+"','" +
HireDate+"','"+Job+"','"+Publisher+"','"+City+"');";
}
}

Now, we have a JavaScript function hat passes the parameters to parent window on the DataGrid Click event. Since this is a modal popup, we can return the selected row value to the parent window through window.returnValue.

//JavaScript Function

 function setMouseClick(first_name,last_name,hire_date,job,publisher,city ) {
var array = new Array();
array[0]=first_name;
array[1]=last_name;
array[2]=hire_date;
array[3]=job;
array[4]=publisher;
array[5]=city;
window.returnValue=array;
window.close();
}

On the parent window side, we have a JavaScript function that accepts the return value from the child window and shows up the return value on text boxes. The OnSearch function fires on clicking the search hyperlink.
Collapse

//JavaScript Function

 function OnSearch()
{
var value = window.showModalDialog('\Popup.aspx','','');
if(value != null)
{
 document.getElementById('txtFirstName').value = value[0];
 document.getElementById('txtLastName').value = value[1];
 document.getElementById('txtHireDate').value = value[2];
 document.getElementById('txtJob').value = value[3];
 document.getElementById('txtPublisher').value = value[4];
 document.getElementById('txtCity').value = value[5];
}
}

That's all. Thanks!