Download source code

• You already have a say 'DetailsForm.aspx' page which shows up when user clicks on any row in Datagrid/DataGridView.
  
• You are using older version of ASP.NET that doesn't support AJAX extensions (and for some reasons you can't upgrade).
  
• You don't know or don't want to use AJAX.
  

The solution for your problem is IFRAME. I have modified my <DIV> based tooltip and created an IFRAME based tooltip. This enables you to show webpages directly. So the concept is, when user clicks on 'More Info' link, instead of taking him to 'DetailsForm.aspx', show him the page inside a tooltip. This saves you the effort of writing complex javascript or using AJAX. This method is simple and can prove very useful in many scenarios. In the next section, I will describe a sample example which does that. You can download the source code. Go through 'readme.txt' file before running the downloaded code.

Setting up the main page (Default.aspx)
This page contains the datagrid, or datagridview to be more specific. Though this example was written for ASP.NET 2.0 , it can be adopted very easily for older version of ASP.NET. Our main page contains a simple datagrid , which shows data from Northwind database, Employee table. There is a SqlDataSource object which deals with database. I have added a template column showing 'More Info' hyperlink to this datagrid. I am not going to explain things step by step here. You can easily figure out them from the downloaded code.

Main page (Default.aspx) containing the datagrid and
an IFRAME which will be used to display tooltip.

<iframe id="a" src="DetailsForm.aspx" scrolling="no"  
style="border:solid 1px green;font-family:Tahoma ; font-size:small;
background-color:white;width: 450px; height: 200px;
border: solid 1px gray; text-align: center;filter: alpha(Opacity=85);opacity:0.85;display:none" frameborder="0">
</iframe>

Details page(DetailsForm.aspx) which will be shown inside the tooltip.

public partial class DetailsForm : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["EmployeeId"] != null)
        {
            int empId;
            if(Int32.TryParse(Request.QueryString["EmployeeId"],out empId))
            {
                PopulateDataForEmployee(empId);
            }

        }
    }

    private void PopulateDataForEmployee(int employeeId)
    {
        //fetch data for employeeId
        //populate controls

        //below is some dummy code. 
        //Homework : Make this work :-)

        lblBday.Text = Guid.NewGuid().ToString();
        lblCountry.Text = lblBday.Text.Substring(0, 10).ToUpper();
        lblNotes.Text = lblBday.Text + lblCountry.Text;
        lblRptTo.Text = Guid.NewGuid().ToString();
    }
}

Writing required javascript.
To the main page (Default.aspx) we add the following javascript functions to show and hide our tooltip. (For more information on the tooltip script visit this page.)

<script src="IfrmTooltip.js"></script>
<script language="javascript">
    var t1;
    function showDetails(e,empid)
	{
	    if(t1)t1.Show(e,"<br><br>Loading...");
		var url =  'DetailsForm.aspx?EmployeeId=' + empid;
        document.getElementById("a").src = url;
	}

	function hideTooltip(e)
	{ if(t1)t1.Hide(e);	}
	
	function init()
	{ t1 = new ToolTip("a",true,40);}

</script>

Now, in the code behind file of the main page (Default.aspx) we need to write the code that emits out client-side javascript for showing the tooltip , every time the user oves cursor over 'More Info' hyperlink. So here is the code for that:

 if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Control ctrl = e.Row.Cells[5].FindControl("lnkMoreInfo");
            if (ctrl == null) return;
            LinkButton  l = (LinkButton)ctrl;
            string empId = e.Row.Cells[0].Text;
            l.Attributes.Add("onmouseover", "showDetails(event," + empId + ")");
            l.Attributes.Add("onmouseout", "hideTooltip(event)");
        }

[All trademarks and registered trademarks appearing on ashishware.com are the property of their respecive owners.]