how to add different styles to first index and last index of a repeater in asp.net

AliExpress.com Product - Portable Mobile Laptop Standing Desk For Bed Sofa Laptop Folding Table Notebook Desk With Mouse Pad & Cooling Fan For Office

Advertisements Section

AliExpress.com Product - Portable Foldable Adjustable Laptop Desk Computer Table Stand Tray For Sofa Bed Black

In this article we have selected a simple case in which we need to apply different styles to first index , last index and all other indexes of a repeater in asp.net .

Let say we have following implementation for a repeater.

A simple class named "MyClass" which may have some properties.

public class MyClass
{
    public string Title { get; set; }
    public string Content { get; set; }
} 

Then a method that would get data from database but currently to keep it simple we have generated data directly here.

private List<MyClass> fillData()
{
     List<MyClass> myList = new List<MyClass>();
     for (int i = 1; i <= 10; i++)
         { 
           MyClass obj = new MyClass();
           obj.Title = "Item Title " + i;
           obj.Content = "This is Item's Content for " + i;
           myList.Add(obj);
         }  
   return myList;
}

and now we have called this on our Page_Load event.

protected void Page_Load(object sender, EventArgs e)
{ 　
      rptrMainContent.DataSource = fillData();
     rptrMainContent.DataBind(); 　
}
  

we have following code in our .aspx file.

<asp:Repeater ID="rptrMainContent" runat="server">
   <ItemTemplate>
        <div class="Generic">
         <h1><%# Eval("Title")%></h1>
            <p class="GenericPara">
             <%# Eval("Content") %>
            </p>
        </div>
   </ItemTemplate>
</asp:Repeater>

Now we have to achieve the following two point.

-We need to have "First" class on div for the first index only, All other indexes will have the same class "Generic"

-we need to have "Last" class on div for the last index only, All other indexes will have the same class "GenericPara"

Now for getting the first index of a repeater we have the property "Container.ItemIndex"
and that index starts from 0. so through following line we can achieve our first point.

<%# Container.ItemIndex==0?"First":"Generic" %>
  

Now for 2nd point we need to type cast repeater's data source because we don't have any property through which we can directly get the item count or get the last index of a repeater.

So for that purpose first we need to type cast "Container.Parent" as Repeater and then type cast its DataSource as List<MyClass> and then you can get its count and compare it from ItemIndex and get the desired result. as shown. (we can also type cast repeater's DataSource as IList as well).

<%# Container.ItemIndex==((Container.Parent as Repeater).DataSource as List<MyClass>).Count()-1?"Last":"GenericPara" %>
  

Or to cut it short we can get repeater's data source directly by repeater's ID like the following one.

<%# Container.ItemIndex==(rptrMainContent.DataSource as List<MyClass>).Count()-1?"Last":"GenericPara" %>
  

So now our final code in the .aspx file will look like the following one.

<asp:Repeater ID="rptrMainContent" runat="server">
   <ItemTemplate>
        <div class="<%# Container.ItemIndex==0?"First":"Generic" %>">
         <h1><%# Eval("Title")%></h1>
            <p class="<%# Container.ItemIndex==(rptrMainContent.DataSource as List<MyClass>).Count()-1?"Last":"GenericPara" %>">
             <%# Eval("Content") %>
            </p>
        </div>
   </ItemTemplate>
</asp:Repeater>