Highlight (bold font) row in asp:Repeater with timer

Question

I have a list of activities that is displayed with a Repeater. I already use Timers to display these, so the Timer isn't the problem. It's the code that i have to put into the Timer_tick method.

The "highlight-Timer" is supposed to highlight the items/rows one at a time, and then I want to display some info related to the highlighted row.

If it's easier with another control that's no problem. I doesn't have to be a Repeater. I just use it because of the styling-possibilities (it isn't displayed in just one line, but with several line-breaks etc.)

As requested:

(Repeater)

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div id="divActivity" runat="server">
            <span style="font-size:30px;">
                <%# DataBinder.Eval(Container.DataItem, "act_headline") %>
            </span>
            <br />
            <img alt="mapIcon" src="../img/mapIcon.gif" height="15px" width="15px" style="position:absolute;" />
            <span style="font-size:12px; font-style:italic; margin-left:23px;">    
                <%# DataBinder.Eval(Container.DataItem, "act_place") %>
            </span>
            <img alt="watchIcon" src="../img/watchIcon.png" height="15px" width="15px" style="position:absolute;" /> 
            <span style="font-size:12px; font-style:italic; margin-left:23px;">
                <%# DataBinder.Eval(Container.DataItem, "act_start") %> - <%# DataBinder.Eval(Container.DataItem, "act_end") %>
            </span>
            <br />
            <div style="word-wrap: break-word; width:1000px; margin-top:20px; padding:0;">
                <%# DataBinder.Eval(Container.DataItem, "act_text") %>
            </div>
            <br />
                <img alt="infoIcon" src="../img/infoIcon.png" height="15px" width="15px" style="position:absolute;" />
            <span style="font-size:12px; margin-left:23px;"><a target="_blank" href="http://<%# DataBinder.Eval(Container.DataItem, "act_info") %>"><%# DataBinder.Eval(Container.DataItem, "act_info") %></a>
            </span>
        </div>
    </ItemTemplate>
</asp:Repeater>

I don't have anything in the the Timer_tick-event, as i've tried several things and the deleted it after it failed. Hope it's enough.

Answer 1

I would set a special CSS class to the highlighted item by using something like this in the tick event handler by looping over the Repeater.Items collection.

Something like this (untested):

int currentHighlight = -1;
int nextHighlight = -1;
for (int i = 0; i < Repeater1.Items.Count; i++)
{
    HtmlControl htmlDiv = (HtmlControl)Repeater1.Controls[i].Controls[1];

    if (htmlDiv.Attributes["class"] != null)
    {
        if (htmlDiv.Attributes["class"].Contains("highlighted")) // this is the currently highlighted item
        {
            // record currently highlighted item index
            currentHighlight = i;

            // remove highlight
            htmlDiv.Attributes["class"].Replace("highlighted", "");
            htmlDiv.Attributes["class"].Trim();
        }
    }
}

if ((currentHighlight == -1) || (currentHighlight == Repeater1.Items.Count))
{
    // handle first Item highlighting
    nextHighlight = 1;
}
else
{
    // handle standard case
    nextHighlight = currentHighlight + 1;
}

// highlight next item
((HtmlControl)Repeater1.Controls[nextHighlight].Controls[1]).Attributes["class"] += " highlighted";

Then you can use the highlighted CSS class to handle styling (the bold font you mention) as well as some special behavior in JavaScript or jQuery for example.

BTW, you can do any other operation on the RepeaterItem object once you get which one is currently highlighted.