Monday, July 9

Ajax Tab Inside a Gridview



Here is my sample solution












































Step1:-
Here is my  subgrid.css:-
div.order
{
       margin-left20pxmargin-right20px;display:none;
}

Step2:- 
Here is my Site.css:-
/* DEFAULTS
----------------------------------------------------------*/

body  
{
    background#b6b7bc;
    font-size.80em;
    font-family"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin0px;
    padding0px;
    color#696969;
}

a:linka:visited
{
    color#034af3;
}

a:hover
{
    color#1d60ff;
    text-decorationnone;
}

a:active
{
    color#034af3;
}

p
{
    margin-bottom10px;
    line-height1.6em;
}


/* HEADINGS  
----------------------------------------------------------*/

h1h2h3h4h5h6
{
    font-size1.5em;
    color#666666;
    font-variantsmall-caps;
    text-transformnone;
    font-weight200;
    margin-bottom0px;
}

h1
{
    font-size1.6em;
    padding-bottom0px;
    margin-bottom0px;
}

h2
{
    font-size1.5em;
    font-weight600;
}

h3
{
    font-size1.2em;
}

h4
{
    font-size1.1em;
}

h5h6
{
    font-size1em;
}

/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1.rightColumn > h2.leftColumn > h1.leftColumn > h2
{
    margin-top0px;
}


/* PRIMARY LAYOUT ELEMENTS  
----------------------------------------------------------*/

.page
{
    width960px;
    background-color#fff;
    margin20px auto 0px auto;
    border1px solid #496077;
}

.header
{
    positionrelative;
    margin0px;
    padding0px;
    background#4b6c9e;
    width100%;
}

.header h1
{
    font-weight700;
    margin0px;
    padding0px 0px 0px 20px;
    color#f9f9f9;
    bordernone;
    line-height2em;
    font-size2em;
}

.main
{
    padding0px 12px;
    margin12px 8px 8px 8px;
    min-height420px;
}

.leftCol
{
    padding6px 0px;
    margin12px 8px 8px 8px;
    width200px;
    min-height200px;
}

.footer
{
    color#4e5766;
    padding8px 0px 0px 0px;
    margin0px auto;
    text-aligncenter;
    line-heightnormal;
}


/* TAB MENU  
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding4px 0px 4px 8px;
}

div.menu ul
{
    list-stylenone;
    margin0px;
    padding0px;
    widthauto;
}

div.menu ul li adiv.menu ul li a:visited
{
    background-color#465c71;
    border1px #4e667d solid;
    color#dde4ec;
    displayblock;
    line-height1.35em;
    padding4px 20px;
    text-decorationnone;
    white-spacenowrap;
}

div.menu ul li a:hover
{
    background-color#bfcbd6;
    color#465c71;
    text-decorationnone;
}

div.menu ul li a:active
{
    background-color#465c71;
    color#cfdbe6;
    text-decorationnone;
}

/* FORM ELEMENTS  
----------------------------------------------------------*/

fieldset
{
    margin1em 0px;
    padding1em;
    border1px solid #ccc;
}

fieldset p
{
    margin2px 12px 10px 10px;
}

fieldset.login labelfieldset.register labelfieldset.changePassword label
{
    displayblock;
}

fieldset label.inline
{
    displayinline;
}

legend
{
    font-size1.1em;
    font-weight600;
    padding2px 4px 8px 4px;
}

input.textEntry
{
    width320px;
    border1px solid #ccc;
}

input.passwordEntry
{
    width320px;
    border1px solid #ccc;
}

div.accountInfo
{
    width42%;
}

/* MISC 
----------------------------------------------------------*/

.clear
{
    clearboth;
}

.title
{
    displayblock;
    floatleft;
    text-alignleft;
    widthauto;
}

.loginDisplay
{
    font-size1.1em;
    displayblock;
    text-alignright;
    padding10px;
    colorWhite;
}

.loginDisplay a:link
{
    colorwhite;
}

.loginDisplay a:visited
{
    colorwhite;
}

.loginDisplay a:hover
{
    colorwhite;
}

.failureNotification
{
    font-size1.2em;
    colorRed;
}

.bold
{
    font-weightbold;
}

.submitButton
{
    text-alignright;
    padding-right10px;
}

Then I have Added  AjaxControlToolkit reference in my Bin folder.Then added  jquery-1.2.3.min.js in Script folder.

Step3:-
Here is my jquery-1.2.3.min.js(you can copy the script and paste in any js file for using this script in your project )
Click Here to get Script if you do not have this



Now take two Images Like  Plus.png and minus.png
Step4:-
Here is my source code(AjaxTabWithinGridview.aspx):-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTabWithinGridview.aspx.cs"
    Inherits="AjaxTabWithinGridview" %>

<%@ Register TagPrefix="swash" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!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>
    <link href="Assets/subgrid.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/scripts/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">
    <asp:Panel CssClass="grid" ID="pnlCust" runat="server">
     <asp:UpdatePanel ID="pnlUpdate" runat="server">
  <ContentTemplate>
 <asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers" runat="server" ShowHeader="true" AutoGenerateColumns="false" OnRowDataBound="gvCustomers_RowDataBound">
    <Columns>
   <asp:TemplateField HeaderText="CustomerID:">
  <ItemTemplate>
 <div class="group" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>'
   onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,<%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>)'>
                                                        
<asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png"
  Style="margin-right: 5px;" runat="server" />
   <asp:Label ID="Label1" runat="server" Text='<%#Eval("CustomerID")%>'></asp:Label>
                                                    </div>
  <div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order">
         <swash:TabContainer ActiveTabIndex="2" runat="server" ID="test">
            <swash:TabPanel ID="TabPanel1" HeaderText="TabPanel1" runat="server">
         <HeaderTemplate>
          <asp:Label Text="shibashish" runat="server" ID="l1"></asp:Label>
           </HeaderTemplate>
         <ContentTemplate>
     <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="Swashrelated ID" DataField="OrderID" ItemStyle-Width="80px" />
  <asp:BoundField HeaderText="EmployeeID" DataField="CustomerID" ItemStyle-Width="50px"
        ItemStyle-HorizontalAlign="Right" />
  <asp:BoundField HeaderText="Date Offered" DataField="OrderDate" 
DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="100px" />
  <asp:BoundField HeaderText="Date Joined" 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>
     </ContentTemplate>
   </swash:TabPanel>
 <swash:TabPanel ID="TabPanel2" HeaderText="TabPanel2" runat="server">
  </swash:TabPanel>
   <swash:TabPanel ID="TabPanel3" HeaderText="TabPanel3" runat="server">
     </swash:TabPanel>
   </swash:TabContainer>
  </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>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </asp:Panel>
                    </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 showhide(master, detail) {

            var src = $(master).children()[0].src;

            if (src.endsWith("plus.png"))
                src = src.replace('plus.png''minus.png');
            else
                src = src.replace('minus.png''plus.png');


            $(master).children()[0].src = src;


            $(detail).slideToggle("normal");
        }
    </script>
    <div>
    </div>
    </form>
</body>
</html>

 Step5:-
Here is my Code Behind (AjaxTabWithinGridview.aspx.cs):-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class AjaxTabWithinGridview : System.Web.UI.Page
{
    class Company
    {
        public string Name { getset; }
        public int CategoryID { getset; }
        public string CustomerID { getset; }
        public string CompanyName { getset; }
        public string TotalOrders { getset; }


    }

    class swash
    {
        public string CustomerID { getset; }
        public string Name { getset; }
        public int ID { getset; }
        public string OrderID { getset; }
        public string OrderDate { getset; }
        public string RequiredDate { getset; }
        public string Freight { getset; }
        public string ShippedDate { getset; }

    }

    // Specify the first data source.
    List<swash> categories = new List<swash>()
        {
            new swash(){Name="Beverages", ID=001,OrderID="s1",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish",CustomerID="shiba1",ShippedDate="11/12/2011"},
            new swash(){ Name="Condiments", ID=002,OrderID="s2",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish2",CustomerID="shiba2",ShippedDate="11/12/2011"},
            new swash(){ Name="Vegetables", ID=003,OrderID="s3",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish3",CustomerID="shiba3",ShippedDate="11/12/2011"},
            new swash() {  Name="Grains", ID=004,OrderID="s4",OrderDate="22/2/1988",RequiredDate="2/11/2012",Freight="shibashish4",CustomerID="shiba4",ShippedDate="11/12/2011"},
            new swash() {  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<Company> compList = new List<Company>()
       {
          new Company{Name="swash",  CategoryID=001,CustomerID="shiba1",CompanyName="swash convergence",TotalOrders="210"},
          new Company{Name="swashglobal",  CategoryID=001,CustomerID="shiba2",CompanyName="swash convergence",TotalOrders="212"},
          new Company{Name="swashconvergence", CategoryID=002,CustomerID="shiba3",CompanyName="swash convergence",TotalOrders="213"},
          new Company{Name="swashinfo", CategoryID=002,CustomerID="shiba4",CompanyName="swash convergence",TotalOrders="214"},
          new Company{Name="swashindustry", CategoryID=003,CustomerID="shiba5",CompanyName="swash convergence",TotalOrders="215"},
          new Company{Name="swashEducation", CategoryID=003,CustomerID="shiba6",CompanyName="swash convergence",TotalOrders="216"},
          new Company{Name="swashPlaza", CategoryID=005,CustomerID="shiba7",CompanyName="swash convergence",TotalOrders="217"},
          new Company{Name="SwashTechnologies", CategoryID=005,CustomerID="shiba8",CompanyName="swash convergence",TotalOrders="218"},
        };
    protected void Page_Load(object sender, EventArgs e)
    {
        gvCustomers.DataSource = compList;
        gvCustomers.DataBind();
    }
    protected void gvCustomers_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            AjaxControlToolkit.TabContainer tb = (AjaxControlToolkit.TabContainer)e.Row.FindControl("test");
            AjaxControlToolkit.TabPanel tbpnl = tb.FindControl("TabPanel1"as AjaxControlToolkit.TabPanel;
            GridView gv = tbpnl.FindControl("gvOrders"as GridView;
            gv.DataSource = from n in categories
                            where n.CustomerID == DataBinder.Eval(e.Row.DataItem, "CustomerID")
                            select n;
            gv.DataBind();

        }
    }
}

After running the solution it will display as below:-


Thanks Shibashish Mohanty


No comments:

Post a Comment

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

ShibashishMnty
shibashish mohanty