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: |
|
| 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: |
|