0
gvnuysal created
- ABP Framework version: v4.3.3
- UI type: Angular
- DB provider: EF Core
- Tiered (MVC) or Identity Server Separated (Angular): no
Hi support and @bunyamin,
https://community.abp.io/posts/using-devextreme-angular-components-with-the-abp-framework-x5nyvj3i
In this article, we received data from a service that lists users. It can easily list 10 users or 100 users. For the listing I want to ask here, how can we implement the skip take infrastructure in the abp framework infrastructure on the angular side, using dxDatagrid.
1 Answer(s)
-
1
Hello,
I made an example for pagination of the user list.
<!-- dev-extreme.component.html --> <dx-data-grid [dataSource]="users" [remoteOperations]="true"> <dxi-column dataField="userName"></dxi-column> <dxi-column dataField="name"></dxi-column> <dxi-column dataField="surname"></dxi-column> <dxi-column dataField="email"></dxi-column> <dxi-column dataField="phoneNumber"></dxi-column> <dxo-paging [pageSize]="1"></dxo-paging> <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[1, 2]"></dxo-pager> </dx-data-grid>import { Component } from '@angular/core'; import { IdentityUserService } from '@volo/abp.ng.identity/proxy'; import CustomStore from 'devextreme/data/custom_store'; @Component({ selector: 'app-dev-extreme', templateUrl: './dev-extreme.component.html' }) export class DevExtremeComponent { users = new CustomStore({ key: 'id', load: (loadOptions: any) => { const params = { skipCount: loadOptions.skip, maxResultCount: loadOptions.take, }; return this.service .getList(params) .toPromise() .then(data => ({ data: data.items, totalCount: data.totalCount, })) .catch(error => { throw 'Data Loading Error'; }); }, }); constructor(public service: IdentityUserService) {} }
