Referencing Controls in DataList

[WB]

Hi,

I would like to do something like this page:
http://www.stocklayouts.com/Products...y.aspx?kwid=38
Notice when you mouse-over any of the icons under each thumbnail, a little
description will appear to tell you what the icon is for.

Okay, so I have a DataList in a stucture like this:

<asp:DataList ID="DlsBrochures" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<img src='/images/<%# Eval("thumbnailName").ToString() %>' />
<br />

<%# Eval("brochureName").ToString() %><br />

<div runat="server" id="DivDetailsLabel"> </div>

<a <%# GetViewDetailsAction() %>
href='/details.aspx?id=<%# Eval("brochureID").ToString() %>'>

<img src="/images/icons/viewDetails.gif" alt="view details" />

</a>
</ItemTemplate>
</asp:DataList>

The HTML <img> tag shows the thumbnail of a brochure, with the name of the
brochure displayed underneath. There is a icon which links user to the
details page when clicked, and when mouse-over, it displays "View Details" in
the <div> tag with ID "DivDetailsLabel".

Now the <a> tag calls the method "GetViewDetailsAction" which exists in the
code-behind, and is supposed to churn out the javascript:

onMouseOver="javascript:document.getElementById('c tl00_CphMain_BlsMostRecent_dlsBrochures_ctl00_DivD etailsLabel').innerHTML = 'View details';"
onMouseOut="javascript:document.getElementById('ct l00_CphMain_BlsMostRecent_dlsBrochures_ctl00_DivDe tailsLabel').innerHTML = ' ';"

But the problem is I can only access the DataList "DlsBrochures" in the code
behind and not the "DivDetailsLabel" inside, and therefore I can't use
"DivDetailsLabel.ClientID" in my method "GetViewDetailsAction"...

How can I access other controls within the ItemTemplate of a DataList?
wb.

[WB]

Hi,

I've figured out a way to do it. Here it is, just to share with everyone:

I hook up a method to the ItemDataBound event of the DataList. This method
goes something like this:

if (e.Item.ItemType == System.Web.UI.WebControls.ListItemType.Item ||
e.Item.ItemType == System.Web.UI.WebControls.ListItemType.Alternating Item)
{
object dataItem = e.Item.DataItem;

System.Web.UI.WebControls.Label lblDesc =
(System.Web.UI.WebControls.Label) e.Item.FindControl("LblDescription");
string lblDescName = lblDesc.ClientID;

// For "View Details" icon
System.Web.UI.WebControls.HyperLink lnkDetails =
(System.Web.UI.WebControls.HyperLink) e.Item.FindControl("LnkViewDetails");
lnkDetails.Attributes.Add("onmouseover",
"javascript:document.getElementById('" + lblDescName + "').innerHTML = 'view
details';");
lnkDetails.Attributes.Add("onmouseout",
"javascript:document.getElementById('" + lblDescName + "').innerHTML = ' ';");
}

And I should mention that I used <asp:Label> control (with
ID="LblDescription") instead of <div>, and <asp:Hyperlink> (with
ID="LnkViewDetails") instead of <a>...
wb.


"WB" wrote:

Hi,

I would like to do something like this page:
http://www.stocklayouts.com/Products...y.aspx?kwid=38
Notice when you mouse-over any of the icons under each thumbnail, a little
description will appear to tell you what the icon is for.

Okay, so I have a DataList in a stucture like this:

<asp:DataList ID="DlsBrochures" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<img src='/images/<%# Eval("thumbnailName").ToString() %>' />
<br />

<%# Eval("brochureName").ToString() %><br />

<div runat="server" id="DivDetailsLabel"> </div>

<a <%# GetViewDetailsAction() %>
href='/details.aspx?id=<%# Eval("brochureID").ToString() %>'>

<img src="/images/icons/viewDetails.gif" alt="view details" />

</a>
</ItemTemplate>
</asp:DataList>

The HTML <img> tag shows the thumbnail of a brochure, with the name of the
brochure displayed underneath. There is a icon which links user to the
details page when clicked, and when mouse-over, it displays "View Details" in
the <div> tag with ID "DivDetailsLabel".

Now the <a> tag calls the method "GetViewDetailsAction" which exists in the
code-behind, and is supposed to churn out the javascript:

onMouseOver="javascript:document.getElementById('c tl00_CphMain_BlsMostRecent_dlsBrochures_ctl00_DivD etailsLabel').innerHTML = 'View details';"
onMouseOut="javascript:document.getElementById('ct l00_CphMain_BlsMostRecent_dlsBrochures_ctl00_DivDe tailsLabel').innerHTML = ' ';"

But the problem is I can only access the DataList "DlsBrochures" in the code
behind and not the "DivDetailsLabel" inside, and therefore I can't use
"DivDetailsLabel.ClientID" in my method "GetViewDetailsAction"...

How can I access other controls within the ItemTemplate of a DataList?
wb.