Use Jquery with repeater, gridview, datagrid

Before we talk about jquery inside any itemtemplate (repeater, gridview, datagrid), we need to understand the basic use of jquery functions

Basic understanding

$("#header") = get the element with id="header"
$("h3") = get all "h3" element
$("div#content .photo") = get all element with class="photo" nested in the 'div id="content"'
$("ul li") = get all "li" element nested in all "ul"
$("ul li:first") = get only the first "li" element of the "ul"

---

This is how your html code inside any itemtemplate might look like, In example i have used DataList, you can use anything repeater, gridview. the logic will remain same.

Datalist Html code

<div id="divHotdealBox" > 1:<asp:DataList ID="dlHotDeals" runat="server" Width="100%" GridLines="Both" OnItemDataBound="dlHotDeals_DataBound" > 2:<ItemTemplate> 3:<asp:Table ID="tblDeal" runat="server"> 4:<asp:TableRow > 5:<asp:TableCell style="text-align:center;"><asp:Label id="lblHotCaption" Text='<%#ETGTrim(DataBinder.Eval(Container, "DataItem.ProductName").ToString(),12)%>' ToolTip='<%#DataBinder.Eval(Container, "DataItem.ProductName")%>' runat="server"></asp:Label></asp:TableCell></asp:TableRow> 6:<asp:TableRow><asp:TableCell style="text-align:center;"><asp:HyperLink runat="server" NavigateUrl='<%#"~/Eshop/Productdetails.aspx?ProId=" +DataBinder.Eval(Container, "DataItem.ProductInfoId")%>' ID="hlnkProduct" CssClass="plink" ><asp:Image Width="55" Height="48" ImageUrl='<%#"~/EShopImages/"+ DataBinder.Eval(Container, "DataItem.ImagePath1")%>' id="imgHotDeal" ToolTip='<%#DataBinder.Eval(Container, "DataItem.ProductName")%>' runat="server"></asp:Image></asp:HyperLink></asp:TableCell> 7:</asp:TableRow> 8:</asp:Table> 9:</ItemTemplate> 10:</asp:DataList> 11:</div> 12:

Here we look how any attribute value can be set with a control. we have set attribute "productDescription" and its value.

Datalist dataBound event in codebehing

protected void dlHotDeals_DataBound(object sender, DataListItemEventArgs e) 1: { 2: if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 3: { 4: tbProductInfoInfo _info = (tbProductInfoInfo)e.Item.DataItem; 5: 6: if (!string.IsNullOrEmpty(_info.HotDealDescription)) 7: { 8: HyperLink _hlnk = (HyperLink)e.Item.FindControl("hlnkProduct"); 9: 10: _hlnk.Attributes.Add("productDescription", _info.HotDealDescription); 11: 12: 13: } 14: 15: 16: } 17: } 18:

Now we bind our jquey function with controls inside the itemtemplate as per our requiremnt

Binding jquery function with controls inside itemtemplate

<script language="javascript" type="text/javascript"> 1:$(document).ready(function(){ 2: 3: $("div#divHotdealBox .plink").mouseover(function(e) { 4: //alert("Showing pop div"); 5: //debugger ; 6: var _text=""; 7: // _text = $("div#divHotdealBox .plink").attr('productDescription'); 8: 9: 10: var currentObjId=(this.id); 11: _text=$("a#"+ currentObjId).attr('productDescription'); 12: 13: 14: $('div#divHotDeal div#divHotDealText').html(_text ); 15: 16: var posx = e.pageX - (this.offsetLeft - 10) ; 17: var posy = e.pageY - (this.offsetTop - 10); 18: 19: 20: $('div#divHotDeal').css({left:posx,top:posy}).animate({ opacity: 'show' }, "slow"); 21: //$('div#divHotDeal').animate({ opacity: 'show' }, "slow"); 22: 23: 24: return false; 25: }); 26: 27: 28: $("div#divHotdealBox .plink").mouseout(function() { 29: //alert("Showing pop div"); 30: 31: //$('.divEnquries').show(); // this also works but without effect. 32: 33: $('div#divHotDeal').animate({ opacity: 'hide' }, "slow"); 34: 35: 36: return false; 37: }); 38: 39: 40:}); 41: 42: 43: 44:</script> 45:

Finally look at the external div design that will appear as a pop div

Pop div design

<div id="divHotDeal" style="display:none;position:absolute;border-color:#2841B8;border-width:1px;width:200px; text-align:justify ; "> 1:<table cellpadding="0" cellspacing="0" border="0" > 2:<tr><td class="pop-div1-left" ></td><td class="pop-div1-mid" > 3:<font color="red"><div id="divHotDealText" style="padding:3px;"> </div></font> 4:</td> <td class="pop-div1-right" ></td></tr> 5:</table> 6:</div> 7: