We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Paging not working in perform CRUD operations Observables in EJ2 Grid

Thread ID:





147497 Sep 12,2019 04:20 PM UTC Sep 19,2019 08:54 AM UTC Angular - EJ 2 3
Tags: Grid
Asked On September 12, 2019 04:20 PM UTC


data is not changed in the paging 

import { ComponentOnInitViewChildfrom '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { Observable } from 'rxjs/Observable';
import { CrudService } from '../../../../../../core/_base/layout/services/crud.service';
import { CommandModelEditSettingsModelfrom '@syncfusion/ej2-angular-grids';
import { DataTableItemModel } from '../../../../../../core/_base/layout/models/datatable-item.model';
import { DataStateChangeEventArgsDataSourceChangedEventArgs, } from '@syncfusion/ej2-grids';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

  selector: 'kt-vat-summary',
  templateUrl: './vat-summary.component.html',
  styleUrls: ['./vat-summary.component.scss'],
export class VatSummaryComponent implements OnInit {
  public dataObservable<DataStateChangeEventArgs>;
  public editSettingsEditSettingsModel;
  public pageSettingsPageSettingsModel;
//   public toolbar: string[];
    public commandsCommandModel[]; 
  public stateDataStateChangeEventArgs;
  public gridGridComponent;

  constructor(private crudServiceCrudService) {
      this.data = crudService;

  public dataStateChange(stateDataStateChangeEventArgs): void {

  public dataSourceChanged(stateDataSourceChangedEventArgs): void {
      if (state.action === 'add') {
          this.crudService.addRecord(state).subscribe(() => {
          this.crudService.addRecord(state).subscribe(() => { }, error => console.log(error), () => {
      } else if (state.action === 'edit') {
          this.crudService.updateRecord(state).subscribe(() => {
          }, (e=> {
      } else if (state.requestType === 'delete') {
          this.crudService.deleteRecord(state).subscribe(() => {

  ngOnInit(): void {
    this.editSettings = {showDeleteConfirmDialog: trueallowEditing: trueallowAdding: trueallowDeleting: 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: 12pageCount: 4 };
    const stateany = {skip:0take: 12};


import { Injectable } from '@angular/core';
import { HttpClientHttpHeaders } 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 { DataStateChangeEventArgsDataSourceChangedEventArgsSortsDataResult } from '@syncfusion/ej2-grids';
import { map } from 'rxjs/operators';

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

  providedIn: 'root'

export class CrudService extends Subject<DataStateChangeEventArgs>  {

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

    private httpHttpClient) {

  public execute(stateany): void {
      this.getAllData(state).subscribe(x => super.next(x as DataStateChangeEventArgs));

  /** GET all data from the server */
  getAllDatastate ?: any): Observable<any[]> {
    return this.http.get<DataTableItemModel[]>(this.customersUrl)
      .map((responseany=> ({
        result: state.take > 0 ? response.slice(0state.take) : response,
        count: response.length
      } as any))
      .map((dataany=> data);

  /** POST: add a new record  to the server */
  addRecord(stateDataSourceChangedEventArgs): Observable<DataTableItemModel> {
    // you can apply empty string instead of state.data to get failure(error)
    return this.http.post<DataTableItemModel>(this.customersUrlstate.datahttpOptions);

  /** DELETE: delete the record from the server */
  deleteRecord(stateany): Observable<DataTableItemModel> {
    const id = state.data[0].id;
    const url = `${this.customersUrl}/${id}`;

    return this.http.delete<DataTableItemModel>(urlhttpOptions);

  /** PUT: update the record on the server */
  updateRecord(stateDataSourceChangedEventArgs): Observable<any> {
    return this.http.put(this.customersUrlstate.datahttpOptions);


<ejs-grid #grid 
[dataSource]='data | async' 
      <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>

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 13, 2019 07:31 AM UTC

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); 

Seeni Sakthi Kumar S 

Replied On September 18, 2019 01:01 PM UTC

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 [Syncfusion]
Replied On September 19, 2019 08:54 AM UTC

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.
Pavithra S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon