DotNetOcean: Div Like A Ajax TabPanel

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

<!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 language="JavaScript">
        function setVisibility(id, visibility) {
            document.getElementById(id).style.display = visibility;
        }
</script>

    <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>
    <script type="text/javascript">
        function ShowToolTip1(obj) {
            var controlID = obj.id.replace('Image1', 'Div1');
            document.getElementById(controlID).style.display = 'block';

        }
        function HideToolTip1(obj) {
            var controlID = obj.id.replace('Image1', 'Div1');
            document.getElementById(controlID).style.display = 'none';
        }
    </script>
    <script type="text/javascript">
        function ShowToolTip2(obj) {
            var controlID2 = obj.id.replace('Image2', 'Div2');
            document.getElementById(controlID2).style.display = 'block';
        }
        function HideToolTip2(obj) {
            var controlID2 = obj.id.replace('Image2', 'Div2');
            document.getElementById(controlID2).style.display = 'none';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <div>
    <table><tr><td><div style="width: 31px">
        <asp:Image ID="MyControlImage"
            onclick="ShowToolTip(this);setVisibility('MyControlDiv1', 'none');setVisibility('MyControlDiv2', 'none');"
            ImageUrl="~/Image/BrowserImage.png" Height="28px" Width="25px" runat="server" />
    </div></td><td><div style="width: 31px">
        <asp:Image ImageUrl="~/Image/shibashish.jpg" Height="28px" Width="25px"
                ID="MyControlImage1" runat="server"
                onclick="ShowToolTip1(this);setVisibility('MyControlDiv', 'none');setVisibility('MyControlDiv2', 'none');" />

    </div></td><td><div style="width: 31px">
        <asp:Image ID="MyControlImage2"
                onclick="ShowToolTip2(this);setVisibility('MyControlDiv1', 'none');setVisibility('MyControlDiv', 'none');"
                ImageUrl="~/Image/BrowserImage.png" Height="28px" Width="25px" runat="server" />

    </div></td></tr></table>




    </div>
    <div><table><tr>



    <td>
    <div id="MyControlDiv" runat="server" style="position:absolute; background-color:Gray;display:none; border:1px solid black; padding:3px;margin-left:10px;margin-top:-6px;">
    <table><tr>

    <td>
    <asp:GridView AllowPaging="True" ID="gvCustomers"
                                             runat="server" ShowHeader="true" AutoGenerateColumns="false">
                                            <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>
    </td>
    <td valign="top">

        <asp:Image ID="Image1" runat="server" onclick="setVisibility('MyControlDiv', 'none');" Height="21px"
            ImageUrl="~/Image/CloseImage.jpg" Width="16px" />
    </td>
    </tr></table>


    </div>
    </td>
    <td>
    <div id="MyControlDiv1" runat="server" style="position:absolute;display:none; background-color:Fuchsia; border:1px solid black;padding:3px; margin-left:40px;margin-top:-6px;">
     <table><tr>

    <td>
       <asp:GridView AllowPaging="True" ID="GridView1"
                                             runat="server" ShowHeader="false" AutoGenerateColumns="false">
                                            <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" />





                                            </Columns>
                                        </asp:GridView>
        </td>
    <td valign="top">

        <asp:Image ID="Image2" runat="server" onclick="setVisibility('MyControlDiv1', 'none');" Height="21px"
            ImageUrl="~/Image/CloseImage.jpg" Width="16px" />
    </td>
    </tr></table>
    </div>
    </td>

    <td>
    <div id="MyControlDiv2" runat="server" style="position:absolute;display:none; background-color:Lime; border:1px solid black; padding:3px;margin-left:70px;margin-top:-6px;">
        <table><tr>

    <td>
       <asp:GridView AllowPaging="True" ID="GridView2"
                                             runat="server" ShowHeader="true" AutoGenerateColumns="false">
                                            <Columns>


                                                                    <asp:TemplateField ItemStyle-CssClass="rownum">
                                                                        <ItemTemplate>
                                                                            <%# Container.DataItemIndex + 1 %>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateField>

                                                                    <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>
        </td>
    <td valign="top">

        <asp:Image ID="Image3" runat="server" onclick="setVisibility('MyControlDiv2', 'none');" Height="21px"
            ImageUrl="~/Image/CloseImage.jpg" Width="16px" />
    </td>
    </tr></table>
    </div>
    </td></tr></table></div>

    </form>
</body>
</html>
CodeBehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Facebook : 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 = categories;
        gvCustomers.DataBind();
        GridView1.DataSource = categories;
        GridView1.DataBind();
        GridView2.DataSource = categories;
        GridView2.DataBind();
    }
}

Thanks shibashish mohanty

Labels

Tuesday, January 31

Div Like A Ajax TabPanel

No comments:

Post a Comment

.