Hi
here is my source code try it:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="finalpopUP.aspx.cs" Inherits="finalpopUP" %>
<!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 id="Head1" runat="server">
<title>JQuery Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers"
runat="server" ShowHeader="true" AutoGenerateColumns="false"
onrowdatabound="gvCustomers_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="CustomerID:">
<ItemTemplate>
<img src="~/Assets/img/plus.png" id="MyControlImage" runat="server" onmouseover="ShowToolTip(this);"
onmousedown="HideToolTip(this);" />
<asp:Label ID="Label1" runat="server" Text='<%#Eval("CustomerID")%>'></asp:Label>
<div id="MyControlDiv" runat="server" style="position:absolute; display:none; background-color:Yellow; border:1px solid black; padding:3px;">
<asp:GridView CssClass="grid" ID="gvOrders" AutoGenerateColumns="false"
runat="server" ShowHeader="true" EnableViewState="false">
<RowStyle CssClass="row" />
<AlternatingRowStyle CssClass="altrow" />
<Columns>
<asp:TemplateField ItemStyle-CssClass="rownum">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Order ID" DataField="OrderID" ItemStyle-Width="80px" />
<asp:BoundField HeaderText="CustomerID" DataField="CustomerID"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField HeaderText="Date Ordered" DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="100px" />
<asp:BoundField HeaderText="Date Required" DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="110px" />
<asp:BoundField HeaderText="Freight" DataField="Freight" DataFormatString="{0:c}"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField HeaderText="Date Shipped" DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="100px" />
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Company Name" DataField="CompanyName" ItemStyle-Width="80px" />
<asp:BoundField HeaderText="TotalOrders" DataField="TotalOrders"
ItemStyle-Width="100px" />
</Columns>
</asp:GridView>
</div>
<script type="text/javascript">
function ShowToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'block';
}
function HideToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'none';
}
</script>
</form>
</body>
</html>
here is 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 finalpopUP : 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();
}
}
}
Simple ToolTip:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="popUp.aspx.cs" Inherits="popUp" %>
<!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>
<script type="text/javascript">
function ShowToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'block';
}
function HideToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gridView1" runat="server" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src="~/Assets/img/plus.png" id="MyControlImage" runat="server" onmouseover="ShowToolTip(this);"
onmousedown="HideToolTip(this);" />
<!--Take Second GridView in Div Element and Set ID as your Image Conrol ID-->
<div id="MyControlDiv" runat="server" style="position:absolute; display:none; background-color:Yellow; border:1px solid black; padding:3px;">
<!--Your Second GridView comes Here-->
hello
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
here is my source code try it:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="finalpopUP.aspx.cs" Inherits="finalpopUP" %>
<!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 id="Head1" runat="server">
<title>JQuery Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers"
runat="server" ShowHeader="true" AutoGenerateColumns="false"
onrowdatabound="gvCustomers_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="CustomerID:">
<ItemTemplate>
<img src="~/Assets/img/plus.png" id="MyControlImage" runat="server" onmouseover="ShowToolTip(this);"
onmousedown="HideToolTip(this);" />
<asp:Label ID="Label1" runat="server" Text='<%#Eval("CustomerID")%>'></asp:Label>
<div id="MyControlDiv" runat="server" style="position:absolute; display:none; background-color:Yellow; border:1px solid black; padding:3px;">
<asp:GridView CssClass="grid" ID="gvOrders" AutoGenerateColumns="false"
runat="server" ShowHeader="true" EnableViewState="false">
<RowStyle CssClass="row" />
<AlternatingRowStyle CssClass="altrow" />
<Columns>
<asp:TemplateField ItemStyle-CssClass="rownum">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Order ID" DataField="OrderID" ItemStyle-Width="80px" />
<asp:BoundField HeaderText="CustomerID" DataField="CustomerID"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField HeaderText="Date Ordered" DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="100px" />
<asp:BoundField HeaderText="Date Required" DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="110px" />
<asp:BoundField HeaderText="Freight" DataField="Freight" DataFormatString="{0:c}"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" />
<asp:BoundField HeaderText="Date Shipped" DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}"
ItemStyle-Width="100px" />
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Company Name" DataField="CompanyName" ItemStyle-Width="80px" />
<asp:BoundField HeaderText="TotalOrders" DataField="TotalOrders"
ItemStyle-Width="100px" />
</Columns>
</asp:GridView>
</div>
<script type="text/javascript">
function ShowToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'block';
}
function HideToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'none';
}
</script>
</form>
</body>
</html>
here is 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 finalpopUP : 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();
}
}
}
Simple ToolTip:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="popUp.aspx.cs" Inherits="popUp" %>
<!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>
<script type="text/javascript">
function ShowToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'block';
}
function HideToolTip(obj) {
var controlID = obj.id.replace('Image', 'Div');
document.getElementById(controlID).style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gridView1" runat="server" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src="~/Assets/img/plus.png" id="MyControlImage" runat="server" onmouseover="ShowToolTip(this);"
onmousedown="HideToolTip(this);" />
<!--Take Second GridView in Div Element and Set ID as your Image Conrol ID-->
<div id="MyControlDiv" runat="server" style="position:absolute; display:none; background-color:Yellow; border:1px solid black; padding:3px;">
<!--Your Second GridView comes Here-->
hello
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
No comments:
Post a Comment