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
• Events
• Pager Settings

Basics

• To enable paging, set the ListView Pageable parameter to true.
• Set the number of items rendered at once with the PageSize parameter (defaults to 10).
• If needed, set the current page of the ListView through its integer Page property.
• 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 listview Data. The listview will build a LINQ expression internally that will be resolved only when needed. This can be useful when the Data comes from something like an EntityFramework context.
• Implement manual data source operations and implement the desired query yourself. In a future version, the DataSourceRequest object 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)	Defines 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)	Determines if 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.

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

See Also

• ListView Overview
• Manual Data Source Operations
• Events
• Live Demo: ListView