Tuesday, December 20

Gridview as Tooltip of another Gridview

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>
 

Thanks
   shibashish mohanty





No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty