Progress Telerik UI for Blazor
The ListView component allows you to display items from data source in a fully customizable, stylish templated list in both Blazor WebAssembly (WASM) and Server-side Blazor apps. The ListView provides out-of-the box paging, multiple templates (item, header, footer and edit templates) allowing you design the UI of component anyway it fits. Furthermore, the component exposes multiple events such as: OnRead, OnUpdate, OnEdit, OnCreate, OnDelete, OnCancel, PageChanged and allows you to define custom data source operations.
Overview example of Blazor ListView component.
The ListView component has built-in paging which you can enable by setting the Pageable parameter to true, and defining the number of rendered items via the PageSize parameter to a particular number (defaults to 10).
You can further configure the paging feature in three different ways:
Specify the number of page buttons displayed
Control the page size and what is shown so users can alter it
Selecting a preferred input type:
Buttons - displays numbers linked to the respective page
Input field – renders a numeric textbox allowing users to type the page number they want to see
Dropdown field – allows the user to select the page from a list
You can fully customize the Telerik UI for Blazor ListView appearance through the various templates it offers:
The ListView component allows you to fetch all the data at once, or load data on demand. For cases when you need to load large volumes of data, you can boost the performance by using custom paging and loading only fixed subset of items while the user browses through the ListView pages.
The ListView component can easily handle create, update and delete (CUD) operations in your Blazor apps thought its EditTemplate and using CommandButtons. The ListViewCommandButton component provides the following built-in Command values: Add, Edit, Save, Delete, Cancel.
The ListView component exposes multiple events to let you handle data in Blazor apps. Below is a summary of the available events and their triggers:
The ListView component provides options for implementing your custom data source operations. Just add a button (or other UI component) and invoke the corresponding action – whether it is calculation, loading data on demand or any other update to the data source.
The Telerik Blazor ListView has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.