Follow Me To get Health tip's and bodybuilding
instagram:sayyedtanveer1410
J query Accordion using nested repeater control in asp.net
OUT PUT
Second Step: Open visual studio add default.aspx page
IN HEAD TAG:
<style type="text/css">
.topnav
{
width: 213px;
padding: 40px 28px 25px 0;
font-family: "CenturyGothicRegular" , "Century Gothic" , Arial, Helvetica, sans-serif;
}
ul.topnav
{
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.topnav li
{
}
ul.topnav li a
{
line-height: 10px;
font-size: 11px;
padding: 10px 5px;
color: Aqua;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.topnav li a:hover
{
background-color: #675C7C;
color: white;
}
ul.topnav ul
{
margin: 0;
padding: 0;
display: none;
}
ul.topnav ul li
{
margin: 0;
padding: 0;
clear: both;
}
ul.topnav ul li a
{
padding-left: 20px;
font-size: 11px;
font-weight: normal;
outline: 0;
}
ul.topnav ul li a:hover
{
background-color: #D3C99C;
font-family:Lucida Sans;
color: #675C7C;
}
ul.topnav ul ul li a
{
color:Yellow;
font-weight:bold;
font-family:Lucida Sans;
padding-left: 40px;
}
ul.topnav ul ul li a:hover
{
background-color: #D3CEB8;
color:Red;
}
ul.topnav span
{
float: right;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Scripts/scriptbreaker-multiple-accordion-1.js">DownLoad</script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$("#div").accordion({
accordion: false,
speed: 500,
closedSign: '[+]',
openedSign: '[-]'
});
$('.topnav ul:first').show();
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="div">
<ul class="topnav">
<asp:Repeater ID="parentRepeater" runat="server">
<ItemTemplate>
<li id="liFirst" style="background-color:Gray;"><a href="#">
<%# DataBinder.Eval(Container.DataItem, "ProductCategoryName")%></a>
<asp:HiddenField ID="ItemID" Value='<%#Eval("ProdCategoryID")%>' runat="server" Visible="false" />
<!-- start child repeater -->
<div style="height: auto;">
<p style="margin-left: -29px;">
<ul>
<asp:Repeater ID="childRepeater" runat="server">
<ItemTemplate>
<li><a href="#">
<%# DataBinder.Eval(Container.DataItem, "ProductSubCategoryName")%></a>
<br>
<ul>
<asp:Repeater ID="nestchildRepeater" runat="server">
<ItemTemplate>
<li>
<asp:HiddenField ID="ChildID" Value='<%#Eval("ProdSubCategoryID")%>' runat="server"
Visible="false" />
<asp:LinkButton ID="lnkBtnProducts" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName")%>'
runat="server" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</p>
</div>
<!-- end child repeater -->
</li>
</ItemTemplate>
</asp:Repeater>
<!-- end parent repeater -->
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
3 Step: In default.aspx.cs on PageLoad ()
if (!IsPostBack)
{
// MY CATEGORY TABLE
SqlDataAdapter cmd1 = new SqlDataAdapter("select * from Tbl_ProductCategory", con);
DataSet ds = new DataSet();
cmd1.Fill(ds, "Tbl_ProductCategory");
// MY SUB CATEGORY TABLE
SqlDataAdapter cmd2 = new SqlDataAdapter("select * from Tbl_ProductSubCategory", con);
cmd2.Fill(ds, "Tbl_ProductSubCategory");
// MY PRODUCT TABLE
SqlDataAdapter cmd3 = new SqlDataAdapter("select * from tblProduct", con);
cmd3.Fill(ds, "tblProduct");
// bind parentRepeater... means Category eg cake
parentRepeater.DataSource = ds.Tables["Tbl_ProductCategory"];
parentRepeater.DataBind();
// Now Check In parentRepeater To bind Child Repeater ...means subcategory of that category eg cake -> celebration cake
foreach (RepeaterItem Item in parentRepeater.Items)
{
HiddenField hidden = (HiddenField)parentRepeater.Items[Item.ItemIndex].FindControl("ItemID");
DataView dv = new DataView(ds.Tables["Tbl_ProductSubCategory"]);
dv.RowFilter = "ProdCategoryID= " + Convert.ToInt32(hidden.Value);
Repeater nestedDataList = (Repeater)parentRepeater.Items[Item.ItemIndex].FindControl("childRepeater");
nestedDataList.DataSource = dv;
nestedDataList.DataBind();
// Now Check In ChildRepeater To bind NestedRepeater ...means Product of that Subcategory eg cake -> celebration cake -> blackforest
foreach (RepeaterItem NestItem in nestedDataList.Items)
{
HiddenField Nesthidden = (HiddenField)nestedDataList.Items[Item.ItemIndex].FindControl("ChildID");
DataView dvNest = new DataView(ds.Tables["tblProduct"]);
dvNest.RowFilter = "ProdSubCategoryID= " + Convert.ToInt32(hidden.Value);
Repeater nestedProdDataList = (Repeater)nestedDataList.Items[NestItem.ItemIndex].FindControl("nestchildRepeater");
nestedProdDataList.DataSource = dvNest;
nestedProdDataList.DataBind();
}
}
con.Close();
}
Enjoy ....
No comments:
Post a Comment