In one scenario, there are two GridViews with the Main Data and Detailed Data. The Customer would like to show the Detailed Value for the associated Hovered Row by using the HoverMenuExtender.
To achieve this goal, we need to access the Hovered Row’s information and then sent them to the PopupMenu. But the HoverMenu is only a client side control which cannot fire any service event to access the value. So, I need to handle the GridView Row’s onmouseover event to get the hovered information and then call the web service method to build a new DataTable with the hovered key. Then, in the success call back function, fill a PopupMenu with the returned value.
Please follow these steps:
1.Build a new application which contains a GridView. Bind the GridView with a SqlDataSource whose DataFields are ID, User, Category.
DataSourceID ="SqlDataSource1" BackColor ="Azure" Width ="500px" >
< Columns >
< asp:TemplateField >
< ItemTemplate >
< asp:Panel ID ="Panel1" runat ="server" onmouseover ="mouseOverHandler(this);" >
< table width ="100%" >
< tr >
< td width ="25%" >
< asp:Label Font-Bold ="true" ID ="Label1" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />
</ td >
< td width ="50%" >
< asp:Label ID ="Label2" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />
</ td >
< td width ="25%" >
< asp:Label ID ="Label3" runat ="server" Text ='<%# Eval("CATEGORY") % > ' />
</ td >
</ tr >
</ table >
</ asp:Panel >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
< asp:SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"
ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"
SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >
< asp:GridView ID ="GridView1" runat ="server" AutoGenerateColumns ="False" DataKeyNames ="ID"
DataSourceID ="SqlDataSource1" BackColor ="Azure" Width ="500px" >
< Columns >
< asp:TemplateField >
< ItemTemplate >
< asp:Panel ID ="Panel1" runat ="server" onmouseover ="mouseOverHandler(this);" >
< table width ="100%" >
< tr >
< td width ="25%" >
< asp:Label Font-Bold ="true" ID ="Label1" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />
</ td >
< td width ="50%" >
< asp:Label ID ="Label2" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />
</ td >
< td width ="25%" >
< asp:Label ID ="Label3" runat ="server" Text ='<%# Eval("CATEGORY") % > ' />
</ td >
</ tr >
</ table >
</ asp:Panel >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
< asp:SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"
ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"
SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >
2.In the GridView’s ItemTemplate, add a Panel as the target panel. In this Panel, bind three labels with the DataFields
3.Add a DataSet into this application. In the DataSet, add a DataAdapter which has a method “GetDataByHoverKey” that returns a DataTable with the “Category” parameter. The SQL statement is like this:
SELECT CATEGORY, DETAIL, ID FROM DETAIL WHERE (CATEGORY = ?)
4.Add a WebService into this application. Define a WebMethod with the HoverKey parameter and set the returned type as string. In this method, we return a HTML table with the generated DataTable’s Value.
Imports System.Web.Services.Protocols
Imports System.ComponentModel
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
< System.Web.Script.Services.ScriptService() > _
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) > _
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) > _
< ToolboxItem( False ) > _
Public Class HoverMenuService
Inherits System.Web.Services.WebService
< WebMethod() > _
Public Function GetDataByHoverKey( ByVal sHoverKey As String ) As String
Dim dt As New DataSet1.DETAILDataTable
Dim da As New DataSet1TableAdapters.DETAILTableAdapter
dt = da.GetDataByHoverKey(sHoverKey)
Dim sb As New StringBuilder
sb.Append( " <table width='100%'> " )
For Each dr As DataRow In dt.Rows
sb.Append( " <tr> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 0 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 1 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " </tr> " )
Next
sb.Append( " </table> " )
Return sb.ToString
End Function
End Class
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
< System.Web.Script.Services.ScriptService() > _
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) > _
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) > _
< ToolboxItem( False ) > _
Public Class HoverMenuService
Inherits System.Web.Services.WebService
< WebMethod() > _
Public Function GetDataByHoverKey( ByVal sHoverKey As String ) As String
Dim dt As New DataSet1.DETAILDataTable
Dim da As New DataSet1TableAdapters.DETAILTableAdapter
dt = da.GetDataByHoverKey(sHoverKey)
Dim sb As New StringBuilder
sb.Append( " <table width='100%'> " )
For Each dr As DataRow In dt.Rows
sb.Append( " <tr> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 0 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 1 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " </tr> " )
Next
sb.Append( " </table> " )
Return sb.ToString
End Function
End Class
5.Add a onmouseover event handler for the target Panel. In this handler function, we build a DIV element as the PopupMenu. Set the DIV’s id by the target’s ID. Call the WebServie method with the parameter HoverKey and TargetPanel’s ID. Create a HoverMenuBehavior by the Target Panel and PopupMenu.
if ($find( " HoverMenuExtender_ " + e.id)) {
return ;
}
var lableID = e.id.replace( " Panel1 " , " Label3 " );
var hoverKey = $get(lableID).innerHTML;
// create a popup
var popup = document.createElement( " div " );
popup.id = e.id + " _popup " ;
popup.className = " popupMenu " ;
document.body.appendChild(popup);
SoluTes_tHoverMenu.HoverMenuService.GetDataByHoverKey(hoverKey, SucceededCallbackWithContext, FailedCallback, e.id);
$create(AjaxControlToolkit.HoverMenuBehavior,
{ " HoverCssClass " : " popupHover " ,
" PopDelay " : 25 ,
" PopupPosition " : 4 ,
" id " : " HoverMenuExtender_ " + e.id,
" popupElement " : popup
}, null , null , e);
}
6.In the success call back function, fill the corresponding PopupMenu with the returned value.
// succeeded.
// It accepts the result object as a parameter.
function SucceededCallbackWithContext(result, userContext, methodName) {
// get the corresponding span to display feedback by using the context.
var popupValue = $get(userContext + " _popup " )
popupValue.innerHTML = result;
}
// This is the callback function invoked if the Web service
// failed.
// It accepts the error object as a parameter.
function FailedCallback(error) {
// Display the error.
alert( " Service Error: " + error.get_message());
}
7.Complete the CssClass and other script references.
/* Hover Menu */ .popupMenu
{
width : 300px ;
position : absolute ;
visibility : hidden ;
background-color : #F5F7F8 ;
opacity : .9 ;
filter : alpha(opacity=90) ;
}
.popupHover
{
background-image : url(images/header-opened.png) ;
background-repeat : repeat-x ;
background-position : left top ;
background-color : #F5F7F8 ;
}
</ style >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
< Services >
< asp:ServiceReference Path ="~/HoverMenuService.asmx" />
</ Services >
< Scripts >
< asp:ScriptReference Name = " AjaxControlToolkit.Common.Common.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.ExtenderBase.BaseScripts.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.HoverExtender.HoverBehavior.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.HoverMenu.HoverMenuBehavior.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.PopupExtender.PopupBehavior.js " Assembly = " AjaxControlToolkit " / >
</ Scripts >
</ asp:ScriptManager >
Here is the whole code.
.aspx file
Inherits = " SoluTes_tHoverMenu.TestHoverMenuWithDetailedData " %>
<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " cc1 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >
< style type ="text/css" >
/* Hover Menu */ .popupMenu
{
width : 300px ;
position : absolute ;
visibility : hidden ;
background-color : #F5F7F8 ;
opacity : .9 ;
filter : alpha(opacity=90) ;
}
.popupHover
{
background-image : url(images/header-opened.png) ;
background-repeat : repeat-x ;
background-position : left top ;
background-color : #F5F7F8 ;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
< Services >
< asp:ServiceReference Path ="~/HoverMenuService.asmx" />
</ Services >
< Scripts >
< asp:ScriptReference Name = " AjaxControlToolkit.Common.Common.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.ExtenderBase.BaseScripts.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.HoverExtender.HoverBehavior.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.HoverMenu.HoverMenuBehavior.js " Assembly = " AjaxControlToolkit " / >
< asp:ScriptReference Name = " AjaxControlToolkit.PopupExtender.PopupBehavior.js " Assembly = " AjaxControlToolkit " / >
</ Scripts >
</ asp:ScriptManager >
< asp:GridView ID ="GridView1" runat ="server" AutoGenerateColumns ="False" DataKeyNames ="ID"
DataSourceID ="SqlDataSource1" BackColor ="Azure" Width ="500px" >
< Columns >
< asp:TemplateField >
< ItemTemplate >
< asp:Panel ID ="Panel1" runat ="server" onmouseover ="mouseOverHandler(this);" >
< table width ="100%" >
< tr >
< td width ="25%" >
< asp:Label Font-Bold ="true" ID ="Label1" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />
</ td >
< td width ="50%" >
< asp:Label ID ="Label2" runat ="server" Text ='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />
</ td >
< td width ="25%" >
< asp:Label ID ="Label3" runat ="server" Text ='<%# Eval("CATEGORY") % > ' />
</ td >
</ tr >
</ table >
</ asp:Panel >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >
< asp:SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"
ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"
SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >
< script type ="text/javascript" >
function pageLoad() {
}
function mouseOverHandler(e) {
if ($find( " HoverMenuExtender_ " + e.id)) {
return ;
}
var lableID = e.id.replace( " Panel1 " , " Label3 " );
var hoverKey = $get(lableID).innerHTML;
// create a popup
var popup = document.createElement( " div " );
popup.id = e.id + " _popup " ;
popup.className = " popupMenu " ;
document.body.appendChild(popup);
SoluTes_tHoverMenu.HoverMenuService.GetDataByHoverKey(hoverKey, SucceededCallbackWithContext, FailedCallback, e.id);
$create(AjaxControlToolkit.HoverMenuBehavior,
{ " HoverCssClass " : " popupHover " ,
" PopDelay " : 25 ,
" PopupPosition " : 4 ,
" id " : " HoverMenuExtender_ " + e.id,
" popupElement " : popup
}, null , null , e);
}
// This is the callback function invoked if the Web service
// succeeded.
// It accepts the result object as a parameter.
function SucceededCallbackWithContext(result, userContext, methodName) {
// get the corresponding span to display feedback by using the context.
var popupValue = $get(userContext + " _popup " )
popupValue.innerHTML = result;
}
// This is the callback function invoked if the Web service
// failed.
// It accepts the error object as a parameter.
function FailedCallback(error) {
// Display the error.
alert( " Service Error: " + error.get_message());
}
</ script >
</ div >
</ form >
</ body >
</ html >
.asmx file
Imports System.Web.Services.Protocols
Imports System.ComponentModel
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
< System.Web.Script.Services.ScriptService() > _
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) > _
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) > _
< ToolboxItem( False ) > _
Public Class HoverMenuService
Inherits System.Web.Services.WebService
< WebMethod() > _
Public Function GetDataByHoverKey( ByVal sHoverKey As String ) As String
Dim dt As New DataSet1.DETAILDataTable
Dim da As New DataSet1TableAdapters.DETAILTableAdapter
dt = da.GetDataByHoverKey(sHoverKey)
Dim sb As New StringBuilder
sb.Append( " <table width='100%'> " )
For Each dr As DataRow In dt.Rows
sb.Append( " <tr> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 0 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " <td width='50%'> " )
sb.Append( " <span style='font-weight:bold;'> " + dr.Item( 1 ).ToString() + " </span> " )
sb.Append( " </td> " )
sb.Append( " </tr> " )
Next
sb.Append( " </table> " )
Return sb.ToString
End Function
End Class
Have my suggestion helped?
The related thread URL:http://forums.asp.net/p/1504607/3572417.aspx#3572417
Best regards,
Zhi-Qiang Ni