Home > Dynamics Ax, EP > Hover Text in our Dynamics Ax EP Page

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….

 


Advertisements
Categories: Dynamics Ax, EP
  1. Keshav
    January 17, 2011 at 4:28 pm

    Hi Santhosh (AX EP – Wikipedia, Encyclopedia, etc..),

    This post is Awesome. Infact all your posts.

    Thanks.
    Keshav

  2. April 6, 2011 at 11:52 pm

    Hi Santhosh,

    using a grid, this event will be raised on every line change,
    not only by datachanged.

    any suggestion? something else as “this.field != this.orig().field”

    SebDra

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: