DxDatagrid paging with ABP #2838

1 Answer(s)

• 

  1

  muhammedaltug created 4 years ago

  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) {}
  }
  
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel