Hover Text in our Dynamics Ax EP Page

Happy and Prosperous New Year – 2011.

In this article, I want to share the example like, 

Displaying Hover text or Popup window with a text, will be displayed in our EP pages of Dynamics Ax. 

Assume that, we need to place the memo fields like Address/Notes/Comments fields on the grid, in this case these fields will take much space on the Grid. Page size is also more. 

For this scenario, the following example helps us to decrease in the size of the Grid and value will be displayed as Hover text. 

In this example, I am displaying the Hover text for the Customer Address, 

On the AxGridView,

1)      Converted the Address field to ASP Template fields. (Template text field)

2)     Defined the JavaScript functions for Mouse Over and Mouse Out.

Code: 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SampleExample.ascx.cs" Inherits="SampleExample" %>
<%@ Register Assembly="Microsoft.Dynamics.Framework.Portal, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
 Namespace="Microsoft.Dynamics.Framework.Portal.UI.WebControls" TagPrefix="dynamics" %>
<dynamics:AxDataSource ID="DSSampleExample" runat="server"
    DataSetName="CustomerList" ProviderView="CustTable">
</dynamics:AxDataSource>
<script type="text/javascript" language="javascript">
var div = null;
var addname = "NoAddress";
function initDocu()
{
   div = document.createElement('div');
   div.id = 'divPopup'; 
   div.style.visibility = 'hidden'; 
   div.style.position = 'absolute'; 
   div.style.top = '0'; 
   div.style.left = '0'; 
   document.body.appendChild(div);
}
function ShowPopup(hoveritem) 
{ 
   initDocu();

   var address = document.getElementById(hoveritem.id);
   addname = address.value;

    if (addname)
    {
        hp = div; 
        hp.style.top =  event.clientY;
        hp.style.left = event.clientX;
        hp.style.visibility = "visible";
        var html = '<table bgcolor="#666666">'; 
        html += '<tr><td bgcolor="#FFFFE1">'; 
        html += addname
        html += '</td></tr></table>';
        hp.innerHTML = html;
    }
    else
    {
        HidePopup();
   }
} 
function HidePopup() 
{ 
  hp = div; 
  hp.style.visibility = "hidden";
}
</script>
<dynamics:AxGridView ID="AxGridSampleExample" runat="server"
    DataKeyNames="RecId,ContactPerson!RecId" DataMember="CustTable"
    DataSourceID="DSSampleExample" >
    <Columns>
        <dynamics:AxBoundField DataField="AccountNum" DataSet="CustomerList"
            DataSetView="CustTable" SortExpression="AccountNum">
        </dynamics:AxBoundField>
        <dynamics:AxBoundField DataField="Name" DataSet="CustomerList"
            DataSetView="CustTable" SortExpression="Name">
        </dynamics:AxBoundField>
        <dynamics:AxBoundField DataField="InvoiceAccount" DataSet="CustomerList"
            DataSetView="CustTable" SortExpression="InvoiceAccount">
        </dynamics:AxBoundField>
        <dynamics:AxBoundField DataField="CustGroup" DataSet="CustomerList"
            DataSetView="CustTable" SortExpression="CustGroup">          
        </dynamics:AxBoundField>
        <dynamics:AxBoundField DataField="PaymTermId" DataSet="CustomerList"
            DataSetView="CustTable" SortExpression="PaymTermId" >
        </dynamics:AxBoundField>
        <asp:TemplateField ConvertEmptyStringToNull="False" 
            HeaderText="<%$ AxLabel:@SYS9362 %>" SortExpression="Address" >
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"  
                    Text='<%# Bind("Address") %>' 
                    onmouseover="ShowPopup(this);" 
                    onmouseout="HidePopup();" ReadOnly="true">
            </asp:TextBox>        </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</dynamics:AxGridView>  

Now the page looks like as follows….