This article will show how you can Ajax with GridView to display popup messages when mouse moves over certain column. In the demo project I have added first column as an image column with a help icon in it. This kind of implements a feature that if you want more information about the row you can move mouse over this icon, a asynchronous request is sent to server for data about that row and when call returns the returned message is show as a popup message. This technique combines traditional use of GridView along with AJAX to get more data on demand for grid. I have used Anthem.Net AJAX library in my demo project. You can use library of your choice if you are not familiar with Anthem.Net.

I have used the technique from my article How to access gridview cell values on client side and How to highlight datagrid or GridView row on mouse over to raise the client side events for AJAX with appropriate values for that record from client side. Following code snippet from the demo project shows how I have added handlers for onmouseover and onmouseout eventd for the cells. In onmouseover event I pass ProductId value of the record which gets passed back to server during AJAX call.

protected void OnRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        if (String.Empty != m_strSortExp)
        {
            AddSortImage(e.Row);
        }
    }
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView drv = e.Row.DataItem as DataRowView;
        if (null != drv)
        {
            Object ob = drv["ProductID"];
            e.Row.Cells[0].Attributes.Add("onmouseover", "onMouseOnRow('" + ob.ToString() + "');");
            e.Row.Cells[0].Attributes.Add("onmouseout", "onMouseOutOfRow();");
            e.Row.Attributes.Add("onmouseover", "this.className='hightlighrow';");
            e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
        }
    }
    m_iRowIdx++;
}							
							

AJAX and Anthem Usage

Following steps describe the steps to follow in using Anthem.Net. Most of this discussion is available in Anthem.Net InvokePageMethodsample project of this library.

1. Add a public method called GetGridRowHelp to your page so that it takes in ProductId value as parameter:

   
   public String GetGridRowHelp(String strRecordId)
   {
       if (null != m_dsProducts)
       {
           Int32 iProdId = 0;
           Int32.TryParse(strRecordId, out iProdId);
           DataRow prodRow = GetProductDataRow(iProdId);
           if (null != prodRow)
           {
               return String.Format("Price for {0} is {1:c}", prodRow["Name"], prodRow["ListPrice"]);
           }
       }
       return "Could not find product " + strRecordId;
   }

2. Apply the Anthem.Method attribute to the GetGridRowHelp method. Without this, it can't be invoked from clients:

   
   [Anthem.Method]
   public String GetGridRowHelp(String strRecordId)
   {
       ........
   }

3. Register the page with the Anthem manager when the page fires its Load event:

   
   protected void Page_Load(object sender, EventArgs e)
   {
   	Anthem.Manager.Register(this);
   	......
   }

4. In event that gets fired when mouse moves over the image icon in grid view, call Anthem_InvokePageMethod which results in calling server-side GetGridRowHelp method:

   
   <script language="javascript" type="text/javascript">
   function onMouseOnRow(recId)
   {
       var posX = window.event.x;
       var posY = window.event.y;
       getGridHelpMsgControls();
       if (!bHelpCallInProgress)
       {
           bHelpCallInProgress = true;
           Anthem_InvokePageMethod(
   		    'GetGridRowHelp',
   		    [recId],
   		    function(result) 
   		    {
   		        showHelpMsg(result.value, posX, posY);bHelpCallInProgress = false;
   	        }
   	    );
   	}
   }
   </script>

5. The first argument to Anthem_InvokePageMethod needs to be the name of the method you want to invoke

6. The second argument is the array of parameters for that method

7. The third argument is a function that will get invoked here on the client when the server-side call back completes

8. The argument to the client-side call back function is a result object. It has a value and an error property. If an error occurred on the server, value will be null and error won't be:

On server side, we retrieve DataRow corresponding to the ProductId passed from client side, and construct our simple help message. When client call completes, this help message is set in a span and the div holding that span is made visible. In onmouseout event the div showing help message is hidden again.

This mixing of GridView with AJAX could not get any simpler than this. You can extent this technique to do more wonderful things with presentation of data in DataGrid or GridView