Home/ Questions/Q 8764405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:01:31+00:00

I am using a repeater control that shows data for some table. Each row

  • 0

I am using a repeater control that shows data for some table. Each row in the repeater contains two columns: an icon (red/yellow/green circle) and an explanation.

I have to Goals, the first goal is to create the same repeater only now I need it to be horizontal. The second goal is that I need each icon (red/ green/ yellow circle) to be a button so that when I press on one of the icons, an event occurs (doesn’t matter what, say Response.Write(“Green is Pressed”);

Can you help me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To make it horizontal you can use the li list as inline, a css trick. The full code for that :

    <head runat="server">
    <style type="text/css">
    #navlist li
    {
        display: inline;
        list-style-type: none;
        padding-right: 20px;
    }   
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="navcontainer">
    <ul id="navlist">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <li>Some text and my id: <%# GetID(Container.DataItem) %></li>
        </ItemTemplate>
    </asp:Repeater>
    </ul>
    </div>
    </form>
</body>
</html>

    and on code behind:

    public partial class Dokimes_StackOverFlow_HorizontialRepeater : System.Web.UI.Page
{
    List<int> oMainIds = new List<int>();

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 10; i++)
        {
            oMainIds.Add(i);
        }

        Repeater1.DataSource = oMainIds;
        Repeater1.DataBind();
    }

    public int GetID(object oItem)
    {
        return (int)oItem;
    }
}

    and you have a render like:

    Some text and my id: 0 Some text and my id: 1 Some text and my id: 2
    Some text and my id: 3 Some text and my id: 4 Some text and my id: 5
    Some text and my id: 6 Some text and my id: 7 Some text and my id: 8
    Some text and my id: 9

    • 0