How to use different style for the first item in repeater?

Question

For first item I want to use the following <div>:

<div class="six columns">
  <a href="">
    <img src="" />
      <h3>Israeli Embassy Promotes Peace</h3>
      <h4>At a time when Israel is facing threats of...</h4>
  </a>
</div>

And This for rest i want to use following <div>:

<div class="six columns">
    <ul>
         <li><a href="">
             <h3>This is the first alskdjlak s</h3>
             </a></li>
         <li><a href="">
             <h3>asd sad asd asd asdasdasdas d</h3>
             </a></li>
         <li><a href="">
             <h3>dsad asd asd asd asd asd asd</h3>
             </a></li>
    </ul>
</div>

How do i do it?

Answer 1

You first use one integer on the code behind, that is start with 1. Then on repeater you check this value and you go like:

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <% if (iCounter == 1) { %>
            <br />First line id: <%# GetID(Container.DataItem) %>
        <% } else { %>
            <br />Next lines id: <%# GetID(Container.DataItem) %>
        <% }
            iCounter++;
        %>
    </ItemTemplate>
</asp:Repeater>

and on code behind:

public int iCounter = 1;

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;
}

Please note, for the test, here I place and 10 data lines. This example renders:

First line id: 0 
Next lines id: 1 
Next lines id: 2 
Next lines id: 3 
Next lines id: 4 
Next lines id: 5 
Next lines id: 6 
Next lines id: 7 
Next lines id: 8 
Next lines id: 9

Answer 2

Just an update to Aristos answer, without the code-behind method to get the ID.

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate>
   <asp:Panel ID="pnlFirst" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) ==0 %>">
     <br />First Item
   </asp:Panel>
   <asp:Panel ID="pnlRest" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) !=0 %>">
     <br />
     Item:  <%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) %>
   </asp:Panel>
 </ItemTemplate>
</asp:Repeater>

and in code behind

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();
}

Answer 3

Wrap your divs in PlaceHolder controls, and set the visibility of the PlaceHolders in the OnItemCreated event of the repeater using e.Item.ItemIndex to determine if the current item is the first one or not.

Or make them server-side divs (with runat=server) and set the visibility of the divs directly in the sme way

Answer 4

Use CSS.

.six_columns ul li
{
    /* Item style */
}

.six_columns ul li:first-child 
{
    /* First item style */
}

There are also methods for editing content via CSS.