New to Telerik UI for Blazor? Download free 30-day trial

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 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.
  • Bind the ListView with an OnRead handler and implement manual data source operations.

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

See Also

In this article