Monday, 21 January 2013 13:54

how to show datalist item details in jquery popup

Written by 
Rate this item
(0 votes)

t is difficult to use jquery for datalist items
because datalist items are generated dynamically
using same itemtemplate.

most developers want to show item details in popup
when any button clicked in the item.this post will
help everyone -

place a hyper link in itemtemplate of your datalist.
when this hyperlink clicked a popup will appear
showing item details.

then in code behind file in the datalist ItemDataBound
method register a attribute for the hyperlink -

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");

hlnk.Attributes.Add("productDescription",+info.RegisteredProductId.ToString()
+"-"+info.Name);

}}

now in your page you access the attribute values -

$("div#divDatalist .buylink").click(function (e) {
e.preventDefault();
var posy = e.pageY - (this.offsetTop - 10);
var _text = "";
var currentObjId = (this.id);
_text = $("a#" + currentObjId).attr('productDescription');

var partsArray = _text.split('-');
$("#<%= productid.ClientID %>").val(partsArray[0]);
$("#<%= pro_name_pop.ClientID %>").html(addNewlines(partsArray[1], 45));

loadPopup();//write your own logic to show popup div below
//return false;
});

<div id="divDatalist">
Wish List<br /> <br />
<asp:DataList ID="GiftDataListDetail" OnItemDataBound="GiftDataListDetail_ItemDataBound"
runat="server" DataKeyField="RegistryID">
<ItemTemplate>
<asp:LinkButton ID="buy" CssClass="buylink" runat="server" resourcekey="BuyNow" />
//other items
...........
</ItemTemplate>
</asp:DataList>
</div>

<div id="popupdiv">
<asp:HiddenField ID="productid" runat="server" />
<asp:Label ID="pro_name_pop" CssClass="pro_name_pop" runat="server" />
.............
</div>
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 2735 times Last modified on Monday, 19 August 2013 14:37
Super User

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