Tuesday, 22 January 2013 13:54

how to show/hide panel on button click in datalist item

Written by 
Rate this item
(1 Vote)

Its a common requirement.most developers want to show/hide
panel/div on a button click in datalist item.this post
will help everyone -

here is how your page code will be -

<div id="divBox">
Wish List<br /> <br />
<asp:DataList ID="GiftDataListDetail" OnItemDataBound="GiftDataListDetail_ItemDataBound"
runat="server" DataKeyField="GiftRegistryID">

<ItemTemplate>
<asp:Panel ID="meterbar2" runat="server" CssClass="meterbar">
<%--data --%>
</asp:Panel>
</div>
<div class="buybutton"><asp:LinkButton ID="buybutton2" CssClass="buylink" runat="server"/></div>

now in your ItemDataBound event in code behind file -

protected void GiftDataListDetail_ItemDataBound(object source, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Product info = (Product)e.Item.DataItem;
if (!string.IsNullOrEmpty(info.Name))
{

LinkButton hlnk = (LinkButton)e.Item.FindControl("buybutton2");
Panel pan = (Panel)e.Item.FindControl("meterbar2");

hlnk.Attributes.Add("productDescription",pan.ClientID);
}
}
}

at last use jquery in script section to show/hide panel on button click -

$("div#divBox .buylink2").click(function (e) {
e.preventDefault();
var panelid = "";
var currentObjId = (this.id);
panelid = $("a#" + currentObjId).attr('desc');

var realid = $("[id$=" + panelid + "]").attr("id");
$("#" + realid + "").slideToggle("slow");

});

If you have questions about this post or any topics, post your questions in
discussions/forum in this website, you will get your answer

Read 4605 times Last modified on Monday, 19 August 2013 14:42
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments