Select theme:
Radzen Blazor Studio has replaced Radzen as the primary RAD tool for Blazor applications.
Radzen Blazor Studio offers a modern UI, enhanced features, and improved performance to streamline your development process.
The latest documentation for Radzen Blazor Studio is available here: https://www.radzen.com/blazor-studio/documentation/
Open Radzen Blazor Studio docsThis guide demonstrates how to use the DataList component.
Name | Type | Default | Description |
---|---|---|---|
Name | string | 'datalist' + index suffix | Unique name of the DataList. |
Data | array | null | DataList data. |
Count | integer | null | DataList number of all recorcds. |
PageSize | integer | 10 | DataList number of recorcds per page. |
AllowPaging | boolean | false | Is paging allowed. |
WrapItems | boolean | false | Is item wrap allowed. |
Visible | boolean/expression | true | Is DataList visible. |
EmptyText | string | No records to display. | DataList text on no records. |
Template | string | null | DataList template. |
Name | Type | Default | Description |
---|---|---|---|
LoadData | event | null | Load data event of the DataList raised on paging with info about the current page and page size |
By default the DataList component displays the index of the current row as template. Use the Template property to customize the appearance. The whole data item is available as data in the expression.
Template examples:
<strong>${data?.FirstName}</strong>
- display the FirstName property in a <strong></strong>
element.Full Name: ${data?.FirstName} ${data?.LastName}
- display two data item properties in the row.<rz-datalist #datalist0 [allowPaging]="true" [count]="getProductsCount" [data]="getProductsResult" [pageSize]="5" (loadData)="datalist0LoadData($event)">
<ng-template let-data>
{{data?.ProductName}}
</ng-template>
</rz-datalist>
DataList component can perform paging both in-memory and server-side.
Example request
http://services.radzen.com/odata/OrderDetails?$top=10&$skip=0&$count=true
Radzen is free to use. You can also test the premium features for 15 days.
Start FreeSelect theme: