How to show the Detailed Value for the associated Hovered Row of the GridView by using the HoverMenuExtender?

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.

代码

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

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

代码

6.In the success call back function, fill the corresponding PopupMenu with the returned value.

代码

// 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());
}

7.Complete the CssClass and other script references.

代码

Here is the whole code.

.aspx file

代码

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestHoverMenuWithDetailedData.aspx.vb"
    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

代码

Have my suggestion helped?

The related thread URL:http://forums.asp.net/p/1504607/3572417.aspx#3572417

Best regards,

Zhi-Qiang Ni

posted on 2009-12-18 17:56 Zhi-Qiang Ni 阅读(803) 评论(3) 编辑收藏举报