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