Show Hide nested DataList on mouse Hover on LinkButton using jQuery in ASP.Net

Hi ashish007,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" OnItemDataBound="DataList1_ItemDataBound">
        <ItemTemplate>
            <table class="style21">
                <tr>
                    <td class="style23" rowspan="2">
                        <asp:Label ID="lblID" runat="server" ImageUrl='<%#Eval("CustomerID") %>'></asp:Label>
                    </td>
                    <td class="style22">
                        <asp:Label ID="lblName" runat="server" Text='<%#Eval("ContactName") %>'></asp:Label>
                    </td>
                    <td>
                        <div>
                            <asp:DataList ID="DataList2" runat="server" Style="display: none;">
                                <ItemTemplate>
                                    <table style="width: 90%;">
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblFreight" runat="server" Text='<%#Eval("Freight") %>'></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:DataList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="style22" colspan="2">
                        <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#006600" CommandName="A" CommandArgument='<%#Eval("CustomerID") %>'>Accept</asp:LinkButton>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="Red" CommandName="R" CommandArgument='<%#Eval("CustomerID") %>'>Reject</asp:LinkButton>
                        <br />
                    </td>
                </tr>
                <tr>
                    <td class="style23" colspan="2" style="margin-left: 20px;">
                        <label class="timeago" title="<%#Eval("CompanyName") %>" style="font-weight: bold" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
</form>
<style type="text/css">
    .tooltip {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
        background-color: #FB66AA;
        color: White;
        padding: 5px;
        font-size: 10pt;
        font-family: Arial;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=DataList1] a").hover(function () {
            var table = $(this).closest("table").find('[id*=DataList2]').html();
            $(this).simpletip({
                content: table
            });
        }, function () {
            $(this).simpletip({
                content: ''
            });
        });
    });
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataList1.DataSource = GetData("SELECT TOP 10 CustomerID,ContactName,CompanyName FROM Customers");
        DataList1.DataBind();
    }
}

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataRowView dataRowView = e.Item.DataItem as DataRowView;
        string customerId = dataRowView["CustomerID"].ToString();
        DataList orderDataList = e.Item.FindControl("DataList2") as DataList;
        orderDataList.DataSource = GetData("SELECT TOP 5 OrderId,Freight FROM Orders WHERE CustomerID = '" + customerId + "'");
        orderDataList.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = query;
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        DataList1.DataSource = GetData("SELECT TOP 10 CustomerID,ContactName,CompanyName FROM Customers")
        DataList1.DataBind()
    End If
End Sub

Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim dataRowView As DataRowView = TryCast(e.Item.DataItem, DataRowView)
        Dim customerId As String = dataRowView("CustomerID").ToString()
        Dim orderDataList As DataList = TryCast(e.Item.FindControl("DataList2"), DataList)
        orderDataList.DataSource = GetData("SELECT TOP 5 OrderId,Freight FROM Orders WHERE CustomerID = '" & customerId & "'")
        orderDataList.DataBind()
    End If
End Sub

Private Shared Function GetData(ByVal query As String) As DataTable
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = query
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    Return dt
                End Using
            End Using
        End Using
    End Using
End Function

Screenshot