DataList (Angular)link

This guide demonstrates how to use the DataList component.

DataList Propertieslink

DataList Eventslink

Customizing the DataList templatelink

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 declarationlink

<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 operationslink

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