ListView Paging
The ListView component can page the entire data source automatically. Alternatively, you can hook to an event and fetch each page of data yourself.
In this article:
Basics
- To enable paging, set the ListView
Pageableparameter totrue. - Set the number of items rendered at once with the
PageSizeparameter (defaults to 10). - If needed, set the current page of the ListView through its integer
Pageproperty. - You can further customize the pager interface via additional pager settings.
Enable Paging in the ListView component and set a custom page size
@* The Listview can page the entire data source your provide to it so only certain items are rendered at once *@
<TelerikListView Data="@ListViewData" Pageable="true" PageSize="15">
<Template>
<div class="listview-item">
<strong>@context.Name</strong>
</div>
</Template>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Events
The ListView exposes three relevant events. You can find related examples in the Events article.
-
PageChanged- you can use this to react to the user changing the page. -
PageSizeChanged- fires when the user changes the page size via the pager DropDownList. -
OnRead- you can use this to perform the read operation yourself on demand, instead of providing the entire data source at once. You can read more about this in the Manual Data Source Operations article.
You can optimize database queries in two ways:
- Use an
IQueryable<MyModel>collection for the listviewData. The listview will build a LINQ expression internally that will be resolved only when needed. This can be useful when theDatacomes from something like an EntityFramework context.- Implement manual data source operations and implement the desired query yourself. In a future version, the
DataSourceRequestobject will become serializable so you can send it directly over HTTP to a controller and use the LINQ queries it will build for you.
Pager Settings
In addition to Page and PageSize, the ListView provides advanced pager configuration options via the ListViewPagerSettings tag, which is nested inside ListViewSettings. These configuration attributes include:
| Attribute | Type and Default Value | Description |
|---|---|---|
Adaptive |
bool ( true) |
Whether pager elements should change based on the screen size. When enabled, the Pager will hide its Pager Info and PageSize Dropdownlist if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element. |
ButtonCount |
int (10) |
The maximum number of page buttons that will be visible. To take effect, ButtonCount must be smaller than the page count (ButtonCount < Total / PageSize). |
InputType |
PagerInputType ( Buttons) |
Whether the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The PagerInputType enum accepts values Buttons or Input. When Input is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests. |
PageSizes |
List<int?> |
Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A null item in the PageSizes List will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set PageSizes to null programmatically to remove the DropDownList at any time. |
Position |
PagerPosition enum ( PagerPosition.Bottom) |
The position of the Pager. The available options are Top and Bottom. |
ListView Pager Settings
@*Configure the Pager Settings*@
<TelerikListView Data="@ListViewData"
Pageable="true"
@bind-PageSize="@PageSize"
@bind-Page="@CurrentPage">
<ListViewSettings>
<ListViewPagerSettings InputType="PagerInputType.Input"
PageSizes="@PageSizes"
ButtonCount="5"
Adaptive="true"
Position="PagerPosition.Top">
</ListViewPagerSettings>
</ListViewSettings>
<Template>
<div class="listview-item">
<strong>@context.Name</strong>
</div>
</Template>
</TelerikListView>
@code {
int PageSize { get; set; } = 15;
int CurrentPage { get; set; } = 3;
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}