Paging not working in perform CRUD operations Observables in EJ2 Grid

[Rizwan]

HI,

data is not changed in the paging 



components.ts

import { Component, OnInit, ViewChild} from '@angular/core';

import { GridComponent } from '@syncfusion/ej2-angular-grids';

import { Observable } from 'rxjs/Observable';

import { CrudService } from '../../../../../../core/_base/layout/services/crud.service';

import { CommandModel, EditSettingsModel} from '@syncfusion/ej2-angular-grids';

import { DataTableItemModel } from '../../../../../../core/_base/layout/models/datatable-item.model';

import { DataStateChangeEventArgs, DataSourceChangedEventArgs, } from '@syncfusion/ej2-grids';

import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({

  selector: 'kt-vat-summary',

  templateUrl: './vat-summary.component.html',

  styleUrls: ['./vat-summary.component.scss'],

})

export class VatSummaryComponent implements OnInit {

 

  public data: Observable<DataStateChangeEventArgs>;

  public editSettings: EditSettingsModel;

  public pageSettings: PageSettingsModel;

//   public toolbar: string[];

    public commands: CommandModel[]; 

  public state: DataStateChangeEventArgs;

  @ViewChild('grid')

  public grid: GridComponent;

  customers: DataTableItemModel[];

  constructor(private crudService: CrudService) {

      this.data = crudService;

  }

  public dataStateChange(state: DataStateChangeEventArgs): void {

      this.crudService.execute(state);

  }

  public dataSourceChanged(state: DataSourceChangedEventArgs): void {

      if (state.action === 'add') {

          this.crudService.addRecord(state).subscribe(() => {

              state.endEdit();

          });

          this.crudService.addRecord(state).subscribe(() => { }, error => console.log(error), () => {

              state.endEdit();

          });

      } else if (state.action === 'edit') {

          this.crudService.updateRecord(state).subscribe(() => {

              state.endEdit();

          }, (e) => {

              this.grid.closeEdit();

          }

          );

      } else if (state.requestType === 'delete') {

          this.crudService.deleteRecord(state).subscribe(() => {

              state.endEdit();

          });

      }

  }

  ngOnInit(): void {

    this.editSettings = {showDeleteConfirmDialog: true, allowEditing: true, allowAdding: true, allowDeleting: true,  mode: 'Normal', newRowPosition:'Bottom' };

    this.commands = [

      { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },

      { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },

      { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },

      { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }

      ];

    // this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

    this.pageSettings = { pageSize: 12, pageCount: 4 };

    const state: any = {skip:0, take: 12};

    this.crudService.execute(state);

  }

 

}

service.ts

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import { Subject } from 'rxjs/Subject';

import { DataTableItemModel } from '../models/datatable-item.model';

import { DataStateChangeEventArgs, DataSourceChangedEventArgs, Sorts, DataResult } from '@syncfusion/ej2-grids';

import { map } from 'rxjs/operators';

const httpOptions = {

  headers: new HttpHeaders({ 'Content-Type': 'application/json' })

};

@Injectable({

  providedIn: 'root'

})

export class CrudService extends Subject<DataStateChangeEventArgs>  {

  private customersUrl = 'api/grid';  // URL to web api

  constructor(

    private http: HttpClient) {

    super();

  }

  public execute(state: any): void {

      this.getAllData(state).subscribe(x => super.next(x as DataStateChangeEventArgs));

  }

  /** GET all data from the server */

  getAllData( state ?: any): Observable<any[]> {

    return this.http.get<DataTableItemModel[]>(this.customersUrl)

      .map((response: any) => ({

        result: state.take > 0 ? response.slice(0, state.take) : response,

        count: response.length

      } as any))

      .map((data: any) => data);

  }

  /** POST: add a new record  to the server */

  addRecord(state: DataSourceChangedEventArgs): Observable<DataTableItemModel> {

    // you can apply empty string instead of state.data to get failure(error)

    return this.http.post<DataTableItemModel>(this.customersUrl, state.data, httpOptions);

  }

  /** DELETE: delete the record from the server */

  deleteRecord(state: any): Observable<DataTableItemModel> {

    const id = state.data[0].id;

    const url = `${this.customersUrl}/${id}`;

    return this.http.delete<DataTableItemModel>(url, httpOptions);

  }

  /** PUT: update the record on the server */

  updateRecord(state: DataSourceChangedEventArgs): Observable<any> {

    return this.http.put(this.customersUrl, state.data, httpOptions);

  }

}

HTML

<ejs-grid #grid 

[dataSource]='data | async' 

allowPaging='true' 

[pageSettings]='pageSettings'

[editSettings]='editSettings' 

[toolbar]='toolbar'

(dataSourceChanged)='dataSourceChanged($event)' 

(dataStateChange)= 'dataStateChange($event)'>

    <e-columns>

      <e-column field='id' headerText='ID' width='50' isPrimaryKey='true'></e-column>

      <e-column field='cModel'  width='150' headerText='Model'></e-column>

      <e-column field='cManufacture' width='150' headerText='Manufacture'></e-column>

      <e-column field='cDescription'  width='150' headerText='Description'></e-column>

      <e-column headerText='' width=120 [commands]='commands'></e-column>

    </e-columns>

</ejs-grid>

[Seeni Sakthi Kumar Seeni Raj]

Hi Rizwan, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and code example. In your application, you are always return first 12 records as the result (0, state.take). So that it shown first page result in Grid after perform paging. We suggest you to return the result based on the skip(skip- indicate how much record you want to skip take-indicate how much record you want get(pageSize)) and take count, 

getAllData( state ?: any): Observable<any[]> { 

  return this.http.get<DataTableItemModel[]>(this.customersUrl) 

    .map((response: any) => ({ 

      // here we have return the result based on the skip and take count 

      result: state.take > 0 ? response.slice(state.skip, state.skip+state.take) : response, 

      count: response.length 

    } as any)) 

    .map((data: any) => data); 

} 

Regards, 

Seeni Sakthi Kumar S 

[Rizwan]

Hi,
Thank you for support, data change in paging but all data is received.
My requirement is only 12 record  get  pa page and change to paging next 12 records get
same code in previous problem

[Pavithra Subramaniyam]

Hi Rizwan, 

 

While using custom binding you need to return the records based on the skip and take parameters from the service. Could you please ensure that you are receiving the correct skip and take parameter in your service and return the proper records based on the parameters. 

 

If you are still facing the issue please share the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share the  skip, take parameters
2. Share the video demo of the issue.

 

Regards, 

Pavithra S.