<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script language=javascript>
function show(id)
{
var tc=document.getElementById("tot").value;
for(var i=1;i<=tc;i++)
{
if("div"+i==id)
{
$("#div"+i).show("slow");
}
else
$("#div"+i).hide("slow");
}
}
// window.onload=show('div1')
</script
in body tag
<div>
<asp:HiddenField ID="tot" runat=server />
<asp:DataList ID="dl_cat" runat=server >
<ItemTemplate>
<div style="color:white;font-size:13px;font-weight:bold;cursor:pointer;width:250px;height:20px;background-color:Gray;padding-bottom:3px;padding-top:3px;padding-left:5px" onclick="show('div<%#Container.ItemIndex+1%>')" >
<%#Eval("categoryname") %>
</div>
<div id='div<%#Container.ItemIndex+1%>' style="background-color:Yellow;display:none">
<asp:Repeater ID="rp_subcat" DataSource='<%#DataBinder.Eval(Container, "DataItem.InnerVal") %>' runat=server >
<ItemTemplate>
<span style="padding-left:10px"><%#Eval("productname") %></span><br />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:DataList>
</div>
protected void Page_Load(object sender, EventArgs e)
{
DataAccessLayer dl = new DataAccessLayer();
DataSet ds = new DataSet();
dl.RunProcedure("cate_product", ref ds);
ds.Relations.Add("InnerVal", ds.Tables[0].Columns["categoryid"], ds.Tables[1].Columns["categoryid"]);
tot.Value = ds.Tables[0].Rows.Count.ToString();
dl_cat.DataSource = ds.Tables[0];
dl_cat.DataBind();
}
CREATE PROCEDURE [dbo].[cate_product]
AS
select c.categoryid,c.categoryname,p.productid,p.productname into #tamp from categories c
inner join products p on c.categoryid=p.categoryid
select distinct categoryid,categoryname from #tamp
select categoryid,productname from #tamp
drop table #tamp
GO
excellent
ReplyDeletei am using this technique for my new dynamic menu
good example,and very helpful for me......
ReplyDelete