Wednesday, 28 December 2011

Gridview as ToolTip in a gridview using jQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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">
.dialog
{
    font-family:Tahoma;
    font-size:11pt;
    color:#222222;
    background-color:#fff;
}   

.header
{
    position:relative;
    color:#fff;       
    cursor:move; /* So the user knows they can drag the panel */
}
.header .outer
{
    background:url('Assets/img/top-right.png') no-repeat right 50%;
    padding-right:40px;
}
.header .inner
{
    background:url('Assets/img/top-left.png') no-repeat left 50%;
    padding-left:9px;
}
.header .content
{
    height:35px;
    background:url('Assets/img/top-mid.png') repeat-x;
        }
.body .outer
{
    background:url('Assets/img/right.png') repeat-y right 50%;
    padding-right:7px;
}
.body .inner
{
    background:url('Assets/img/left.png') repeat-y left 50%;
    padding-left:7px;
}
.grid
{
    font-family: tahoma;
    font-size: 11px;
    border: solid 1px #7f7f7f;
    border-bottom-width:1px;
    border-collapse:collapse;
    color: #333333;
    width:100%
}


.footer .outer
{
    background:url('Assets/img/bottom-right.png') no-repeat right top;
    padding-right:9px;
}
.footer .inner
{
    background:url('Assets/img/bottom-left.png') no-repeat left top;
    padding-left:9px;
}
.footer .content
{
    height:7px;
    background:url('Assets/img/bottom-mid.png') repeat-x;
        }  
       
    </style>
</head>
<body>
    <title>GridView Master/Detail Tooltip</title>
    <link href="Assets/css/dialog.css" rel="Stylesheet" type="text/css" />
    <link href="Assets/css/grid.css" rel="Stylesheet" type="text/css" />
    <link href="Assets/css/subgrid.css" rel="Stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/JQuery/jquery-1.2.3.min.js" ScriptMode="Release" />
        </Scripts>
    </asp:ScriptManager>
 
    <div id="dlg" class="dialog" style="width: 700px">
      
        <div class="body">
            <div class="outer">
                <div class="inner">
                    <div class="content">
                        <div id="customers" runat="server" class="grid">
                            <asp:UpdatePanel ID="pnlUpdate" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:GridView ID="gvCustomers" runat="server" AllowPaging="True"
                                        AutoGenerateColumns="False" 
                                         ShowHeader="False" Width="100%" onrowdatabound="gvCustomers_RowDataBound">
                                        <Columns>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <div class="group">
                                                        <span>
                                                                <%#Eval("CustomerID")%>
                                                                :
                                                                <%#Eval("CompanyName")%>
                                                                (<%#Eval("TotalOrders")%>Orders) </span>
                                                    </div>
                                                    <div class="order">
                                                       
                                                        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false"
                                                            CssClass="grid"  EnableViewState="false"
                                                            ShowHeader="true" Width="450PX">
                                                            <RowStyle CssClass="row" />
                                                            <AlternatingRowStyle CssClass="altrow" />
                                                            <Columns>
                                                                <asp:TemplateField ItemStyle-CssClass="rownum">
                                                                    <ItemTemplate>
                                                                            <%# Container.DataItemIndex + 1 %>
                                                                        </ItemTemplate>
                                                                </asp:TemplateField>
                                                                <asp:BoundField DataField="OrderID" HeaderText="Order ID"
                                                                    ItemStyle-Width="80px" />
                                                                <asp:BoundField DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
                                                                    HeaderText="Date Ordered" ItemStyle-Width="100px" />
                                                                <asp:BoundField DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}"
                                                                    HeaderText="Date Required" ItemStyle-Width="110px" />
                                                                <asp:BoundField DataField="Freight" DataFormatString="{0:c}"
                                                                    HeaderText="Freight" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="50px" />
                                                                <asp:BoundField DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}"
                                                                    HeaderText="Date Shipped" ItemStyle-Width="100px" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </div>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
                                    </asp:GridView>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="outer">
                <div class="inner">
                    <div class="content">
                    </div>
                </div>
            </div>
        </div>
    </div>

        <script type="text/javascript">
            function pageLoad(sender, args)
            {
               
                $('div.group').hover(over,out);
            }
           
            function over(e)
            {
              
                var offset = $(this).offset();
               
              
                var $next = $(this).next();
               
              
                $next.css({left:offset.left+$(this).width(), top:offset.top});
               
              
                $next.fadeIn('normal');                  
            }
            function out(e)
            {
                var $next = $(this).next();   
                $next.fadeOut('normal');
            }
        </script>

    </form>
</body>
</html>
My code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Test : System.Web.UI.Page
{
    class Product
    {
        public string Name { get; set; }
        public int CategoryID { get; set; }
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string TotalOrders { get; set; }


    }

    class Category
    {
        public string CustomerID { get; set; }
        public string Name { get; set; }
        public int ID { get; set; }
        public string OrderID { get; set; }
        public string OrderDate { get; set; }
        public string RequiredDate { get; set; }
        public string Freight { get; set; }
        public string ShippedDate { get; set; }

    }

    // Specify the first data source.
    List<Category> categories = new List<Category>()
        {
            new Category(){Name="Beverages", ID=001,OrderID="s1",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish",CustomerID="shiba1",ShippedDate="11/12/2011"},
            new Category(){ Name="Condiments", ID=002,OrderID="s2",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish2",CustomerID="shiba2",ShippedDate="11/12/2011"},
            new Category(){ Name="Vegetables", ID=003,OrderID="s3",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish3",CustomerID="shiba3",ShippedDate="11/12/2011"},
            new Category() {  Name="Grains", ID=004,OrderID="s4",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish4",CustomerID="shiba4",ShippedDate="11/12/2011"},
            new Category() {  Name="Fruit", ID=005,OrderID="s5",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish5",CustomerID="shiba5",ShippedDate="11/12/2011"}           
        };

    // Specify the second data source.
    List<Product> products = new List<Product>()
       {
          new Product{Name="Cola",  CategoryID=001,CustomerID="shiba1",CompanyName="swash convergence",TotalOrders="210"},
          new Product{Name="Tea",  CategoryID=001,CustomerID="shiba2",CompanyName="swash convergence",TotalOrders="212"},
          new Product{Name="Mustard", CategoryID=002,CustomerID="shiba3",CompanyName="swash convergence",TotalOrders="213"},
          new Product{Name="Pickles", CategoryID=002,CustomerID="shiba4",CompanyName="swash convergence",TotalOrders="214"},
          new Product{Name="Carrots", CategoryID=003,CustomerID="shiba5",CompanyName="swash convergence",TotalOrders="215"},
          new Product{Name="Bok Choy", CategoryID=003,CustomerID="shiba6",CompanyName="swash convergence",TotalOrders="216"},
          new Product{Name="Peaches", CategoryID=005,CustomerID="shiba7",CompanyName="swash convergence",TotalOrders="217"},
          new Product{Name="Melons", CategoryID=005,CustomerID="shiba8",CompanyName="swash convergence",TotalOrders="218"},
        };
    protected void Page_Load(object sender, EventArgs e)
    {
        gvCustomers.DataSource = products;
        gvCustomers.DataBind();
    }

    protected void gvCustomers_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView gv = (GridView)e.Row.FindControl("gvOrders");
            gv.DataSource = from n in categories
                            where n.CustomerID == DataBinder.Eval(e.Row.DataItem, "CustomerID")
                            select n;
            gv.DataBind();

        }
    }
}
I guess that was all for this post. You can download the solution [GridViewMasterDetailTooltipDemo.rar (62.17 kb)] and explore the code
Download from here and modify as above
download the sample [51.14 kb]  
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)