Open Closed

DxDatagrid paging with ABP #2838


User avatar
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)
  • User Avatar
    1
    muhammedaltug created

    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) {}
    }
    
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15