Reputation: 3694
I have a list view like below:
<asp:ListView ID="lstTopRanks" runat="server">
<ItemTemplate>
<div class="Amazing-{recordNumber}">{itemdata}</div>
</ItemTemplate>
</asp:ListView>
I would like to replace {recordNumber}
with a running counter so the first record shown have 1 the second will be 2 and so on.
How can I do this?
Thanks in advance
Upvotes: 6
Views: 15474
Reputation: 2047
You can do it with Container.DisplayIndex
, or Container.DataItemIndex
, if the ID is not coming from for example a database.
The key is this: class="Amazing-<%#Container.DisplayIndex + 1 %>"
.
If recordNumber
does come from an external datasource, you can do that as well like this: class='Amazing-<%# Eval("YourDatabaseIDColumn") %>'
.
DisplayIndex and DataItemIndex differ if you are paging your datasource. DisplayIndex is a running index always starting on the current page, and DataItemIndex is a running number in your whole datasource.
Here is an example:
//just to represent something like a db table with an ID and a description
Pair[] data = new Pair[] { new Pair(123, "row1"), new Pair(124, "row2"), new Pair(125, "row3"), new Pair(126, "row4"), new Pair(127, "row5"), new Pair(128, "row6"), new Pair(129, "row7"), new Pair(130, "row8"), new Pair(131, "row9"), new Pair(132, "row10") };
lstTopRanks.DataSource = data;
lstTopRanks.DataBind();
<asp:ListView ID="lstTopRanks" runat="server">
<LayoutTemplate><asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder></LayoutTemplate>
<ItemTemplate>
<div class="Amazing-<%#Container.DisplayIndex + 1 %>">
DisplayIndex: <b><%#Container.DisplayIndex %></b>;
DataItemIndex: <b><%#Container.DataItemIndex %></b>,
ID and Text: <i><%#((Pair)Container.DataItem).First %>, <%#((Pair)Container.DataItem).Second %></i>
</div>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="lstTopRanks" PageSize="3" >
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
Upvotes: 16