Blazor ListView with pagination support
This knowledge base article explains how to implement the Blazor ListView component with pagination support.
Currently, the Blazor ListView component does not have direct pagination support. You can achieve this functionality by following the steps below.
Get Started with Blazor ListView
By referring to the getting started page below, you can create the Blazor ListView component-https://blazor.syncfusion.com/documentation/listview/getting-started
Implementing ListView component
In the code below, a ListView component is rendered with a dynamic DataSource.
<SfListBox TValue="string[]" TItem="VehicleData" Query="@DataQuery"> <ListBoxFieldSettings Text="Text" Value="Id" /> <SfDataManager @ref="DataManagerRef" AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"> </SfDataManager> </SfListBox>
@code{
public static List<VehicleData> Vehicles = new List<VehicleData> {
new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" },
new VehicleData { Text = "Jaguar 20000", Id = "Vehicle-09" }
};
public class VehicleData
{
public string Text { get; set; }
public string Id { get; set; }
}
public Query DataQuery = new Query().Take(3);
...
public class CustomAdaptor : DataAdaptor
{
// Performs data Read operation
public override object Read(DataManagerRequest dm, string key = null)
{
IEnumerable<VehicleData> DataSource = Vehicles;
int count = DataSource.Cast<VehicleData>().Count();
DataSource = DataOperations.Execute<VehicleData>(DataSource, dm);
return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
}
}
}
Implementing Pager Component
To achieve pagination support in the Blazor ListView component, the external Pager component is used. Refer to the documentation below for implementing the Pager component.
Documentation: https://blazor.syncfusion.com/documentation/pager/getting-started
In the code snippet below, pagination support in the Blazor ListView component is achieved using the PageChanged event of the Pager component.
... <SfPager PageSize="1" TotalItemsCount="3" PageChanged="click"> </SfPager>
@code{
...
public void click(PageChangedEventArgs args)
{
DataQuery = new Query().Skip((int)(3 * (args.CurrentPage) - 1)).Take(3);
}
}
GitHub sample: https://github.com/SyncfusionExamples/blazor-listview-pagination
