Here is my sample solution
Step1:-
Here is my subgrid.css:-
div.order
{
margin-left: 20px; margin-right: 20px;display:none;
}
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;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* 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-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
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
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="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>
<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>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("CustomerID")%>'></asp:Label>
</div>
<div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order">
<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 %>
<%# 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" />
DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="100px" />
<asp:BoundField HeaderText="Date Joined" DataField="RequiredDate"
DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="110px" />
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" />
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>
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 { get; set; }
public int CategoryID { get; set; }
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string TotalOrders { get; set; }
}
class swash
{
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<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.