DataList (Angular)
This guide demonstrates how to use the DataList component.
DataList Properties
| 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. |
DataList Events
| 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 |
Customizing the DataList template
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.
Angular declaration
<rz-datalist #datalist0 [allowPaging]="true" [count]="getProductsCount" [data]="getProductsResult" [pageSize]="5" (loadData)="datalist0LoadData($event)">
<ng-template let-data>
{{data?.ProductName}}
</ng-template>
</rz-datalist>
In-memory and server-side operations
DataList component can perform paging both in-memory and server-side.
- For in-memory paging enable paging, add load event for the Page, call your service and set data property to returned value.
- For server-side paging enable paging, add load event for the Page, call your service and set data and count properties to returned values, add loadData event handler, call your service again with provide information in the event argument and set again data and count properties to returned values. If you use New Data Dialog, Radzen will setup everything automatically.
Example request
http://services.radzen.com/odata/OrderDetails?$top=10&$skip=0&$count=true
