Q: How do I display the item indexes and total number of items in a list?

A: See below.

How to display item indexes

The easiest way to display item indexes is to to create a public int variable and increase it by 1 for each item, for example:

<script language="csharp" runat="server">
 int newsIndex = 0;
</script>

<episerver:newslist id="NewsList" PageLinkProperty="ListingContainer"
                    runat="server">
  <NewsTemplate>
     [<%# ++newsIndex %>/<%# NewsList.DataCount %>]
     <%# Container.CurrentPage.PageName %>
  </NewsTemplate>
</episerver:newslist>

The result would be something like:

[1/3] First page
[2/3] Second page
[3/3] Third page
etc.

If you want to use templates such as FirstNewsTemplate, SecondNewsTemplate etc you have to increase the counter in each template, for example:

<FirstNewsTemplate>
  [<%# ++newsIndex %>/<%# NewsList.DataCount %>]
  <%# Container.CurrentPage.PageName %>
</FirstNewsTemplate>
<SecondNewsTemplate>
  [<%# ++newsIndex %>/<%# NewsList.DataCount %>]
  <%# Container.CurrentPage.PageName %>
</SecondNewsTemplate> <ThirdNewsTemplate>
  [<%# ++newsIndex %>/<%# NewsList.DataCount %>]
  <%# Container.CurrentPage.PageName %>
</ThirdNewsTemplate>

How to display the total number of items in a list that is limited by MaxCount

With MaxCount you can control how many items are rendered in a list per page. But since the DataCount property always holds the actual number of items in the list at DataBind you will not be able to display the total item count, including items that are not fetched because of the MaxCount setting. To solve this, so you can show the total number of items when using MaxCount, you need two webcontrols: one reader and one viewer. In this example we list news items, so we will use two NewsList controls.

First, create the reader.

<episerver:newslist id="NewsReader" PageLinkProperty="ListingContainer"
                    runat="server"/>

Second, create the viewer.

<episerver:newslist id="NewsViewer" DataSource=<%#NewsReader%>
                    MaxCount=3 runat="server"> 
  <NewsTemplate> 
     [<%# ++newsIndex %>/<%# NewsReader.DataCount %>]
     <%# Container.CurrentPage.PageName %>
  </NewsTemplate>
</episerver:newslist>

Note that we use a counter variable to show the index for each news item, as described in the beginning of this article. The MaxCount=3 tells the NewsList to only list 3 news items and the
<%# NewsReader.DataCount %> expression displays the total number of news items.

Also note that the PageLinkProperty="ListingContainer" must be defined on the reader control but not on the viewer.

So what would the results be? If the total number of news items at the time of the databind is 9 and MaxCount is set to 3, we would get:

[1/9] First news item
[2/9] Second news item
[3/9] Third news item

Why do I need two web controls?

To understand this you need to understand how MaxCount and DataCount work. MaxCount lets you define how many items the list should contain at most, after all filters have executed. The DataCount property on the other hand tells you how many items the list contains after all filters have executed. This means that the DataCount value can never be greater than MaxCount. Since it is impossible to predict what the filters will do with the list, it is impossible to get the total number of items at databind time with a single list control. This is by design.

As shown above the problem can easily be solved by chaining two controls where the first control gets the list and the second control gets its input from the first control and displays the results. Why this pattern works is because all filters on the first control will be executed before the second control gets the resulting list. Hence the second control can get the total number of items by reading the DataCount property of the first control.