Find div in repeater, and change it's style element

Question

I have a repeater object that looks like the following

<asp:Repeater id="rptSpecialNotes" runat="server">
                    <headerTemplate><ol type="A"></HeaderTemplate>
                    <itemtemplate>
                                <li>
                                </li>
                        <asp:UpdatePanel ID="udpSpecialNotesRepeater" runat="server" UpdateMode="Always">
                            <ContentTemplate>

                                    <div id="specialNotes" name='<%# Eval("itemId") %>' runat="server">
                                        <asp:imagebutton runat="server"  width="20" class="floatLeft" id="specialNotesItem" imageurl='<%# Eval("ImageUrl") %>'  commandname="specialNotesImageChange" commandargument='<%# Eval("itemId") %>'></asp:imagebutton>
                                        <span class="subject"><p><%# eval("Subject") %></p></span>
                                        <br /><br />
                                        <p><%# Eval("AgendaNote")%></p>
                                        <br />
                                    </div>

                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID ="followAlongControl" EventName ="Tick" />
                            </Triggers>
                        </asp:UpdatePanel>
                        <asp:Repeater id="specialNotesAttachmentsRepeater" OnItemCommand="specialNotesAttachmentRepeater_ItemCommand" runat="server" datasource='<%# Container.DataItem.Row.GetChildRows("attachmentRelation") %>' >
                            <itemtemplate>
                                <br />
                                <a href='<%# Container.DataItem("attachmentPath") %>'><%# Container.DataItem("attachmentName") %></a>&nbsp;&nbsp;
                                </itemtemplate>
                        </asp:Repeater>
                    </itemtemplate>
                    <footerTemplate></ol></FooterTemplate>
                </asp:Repeater>

I want to change the background color of the div 'specialNotes' depending on the imageurl of the image button. So if it's checked, the div would be grey, if not, then i'd leave it blank.

Is there a way to do this in the code-behind with VB?

Answer 1

You don't have to "Find" the div after the page has loaded, you can do this as it is getting bound. I imagine that when you say "if it's checked" that you refer to the imagebutton acting as a checkbox, and you want to change the color depending on the location(path) of the image. So I would this in the div:

<div style='<%# doColor(Eval("ImageUrl")) %>'>
    Content in the div
</div>

and then this in the code behind:

Public Function doColor(img As Object) As String
    If img.ToString() = "MyPath" Then
        Return "background-color:red"
    Else
        Return "background-color:green"
    End If
End Function

that way if the ImageUrl equals "MyPath" the background of your div will be red, otherwise it will be green.

Answer 2

Add a runat="server" to your div tag. Then your code behind, you can access that div using:

udpSpecialNotesRepeater.FindControl("div")

on your DataBound event.

It is alot easier to do it in jQuery though. You can just grab id of the div $("#specialNotes") and use the .attr function to change its background.

Answer 3

can use:

Control divControl=e.Item.FindControl("divControl");