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>
