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="DlsBrochure s" runat="server" RepeatDirection ="Horizontal ">
<ItemTemplate >
<img src='/images/<%# Eval("thumbnail Name").ToString () %>' />
<br />

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

<div runat="server" id="DivDetailsL abel"> </div>

<a <%# GetViewDetailsA ction() %>
href='/details.aspx?id =<%# Eval("brochureI D").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 "DivDetailsLabe l".

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

onMouseOver="ja vascript:docume nt.getElementBy Id('ctl00_CphMa in_BlsMostRecen t_dlsBrochures_ ctl00_DivDetail sLabel').innerH TML = 'View details';"
onMouseOut="jav ascript:documen t.getElementByI d('ctl00_CphMai n_BlsMostRecent _dlsBrochures_c tl00_DivDetails Label').innerHT ML = ' ';"

But the problem is I can only access the DataList "DlsBrochur es" in the code
behind and not the "DivDetailsLabe l" inside, and therefore I can't use
"DivDetailsLabe l.ClientID" in my method "GetViewDetails Action"...

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.ItemTyp e == System.Web.UI.W ebControls.List ItemType.Item ||
e.Item.ItemType == System.Web.UI.W ebControls.List ItemType.Altern atingItem)
{
object dataItem = e.Item.DataItem ;

System.Web.UI.W ebControls.Labe l lblDesc =
(System.Web.UI. WebControls.Lab el) e.Item.FindCont rol("LblDescrip tion");
string lblDescName = lblDesc.ClientI D;

// For "View Details" icon
System.Web.UI.W ebControls.Hype rLink lnkDetails =
(System.Web.UI. WebControls.Hyp erLink) e.Item.FindCont rol("LnkViewDet ails");
lnkDetails.Attr ibutes.Add("onm ouseover",
"javascript:doc ument.getElemen tById('" + lblDescName + "').innerHT ML = 'view
details';");
lnkDetails.Attr ibutes.Add("onm ouseout",
"javascript:doc ument.getElemen tById('" + lblDescName + "').innerHT ML = ' ';");
}

And I should mention that I used <asp:Label> control (with
ID="LblDescript ion") instead of <div>, and <asp:Hyperlin k> (with
ID="LnkViewDeta ils") 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="DlsBrochure s" runat="server" RepeatDirection ="Horizontal ">
<ItemTemplate >
<img src='/images/<%# Eval("thumbnail Name").ToString () %>' />
<br />

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

<div runat="server" id="DivDetailsL abel"> </div>

<a <%# GetViewDetailsA ction() %>
href='/details.aspx?id =<%# Eval("brochureI D").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 "DivDetailsLabe l".

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

onMouseOver="ja vascript:docume nt.getElementBy Id('ctl00_CphMa in_BlsMostRecen t_dlsBrochures_ ctl00_DivDetail sLabel').innerH TML = 'View details';"
onMouseOut="jav ascript:documen t.getElementByI d('ctl00_CphMai n_BlsMostRecent _dlsBrochures_c tl00_DivDetails Label').innerHT ML = ' ';"

But the problem is I can only access the DataList "DlsBrochur es" in the code
behind and not the "DivDetailsLabe l" inside, and therefore I can't use
"DivDetailsLabe l.ClientID" in my method "GetViewDetails Action"...

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