How to properly perform CRUD operations in EJ2 Grid using Angular HTTP service and Observables?
8 Replies
Hi Mike,
Sorry for the inconvenience caused.
Based on your query you need to handle paging, sorting and grouping on the server side. For this requirement we suggest you to use custom binding concept of the Grid achieve this requirement. By default in custom binding, you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid’s actions like paging, sorting, grouping, etc. with it. The Grid’s custom binding approach is explained below,
For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering..,. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties
Custom binding documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables
Please refer the below code example that explains about performing grid actions like paging, sorting, grouping etc.
|
app.component.ts
export class AppComponent {
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public count = 0;
public printData: Object[];
@ViewChild('grid', {static: true})
public grid: GridComponent;
public state: DataStateChangeEventArgs;
public toolbarOptions: ToolbarItems[];
constructor( public service: OrdersService) {
this.data = service;
}
public dataStateChange(state: DataStateChangeEventArgs): void {
this.service.execute(state);
}
public ngOnInit(): void {
this.pageOptions = { pageSize: 20 };
let state = { skip: 0, take: 20 };
this.service.execute(state);
}
}
|
Initial rendering and paging
For performing paging the grid will require the skip and take values which is used for defining the number of records to be returned from the server.
For initial rendering:
Here for initial rendering the skip and take values should be set manually and sent to the server.
For Paging:
Here when the paging is done the `dataStateChange` event in triggered. In this event’s arguments, the details required for getting the desired records from the server is passed in the argument to the service.
Sorting:
For performing the sorting the grid requires the details of columns to be sorted and the direction of the sort along with the paging details.
Gouping:
For performing grouping the grid requires the details of the grouping column along with the details required for sorting and paging details.
Please refer the sample below where we have performed the grid actions like paging, sorting and grouping in the server side.
Sample: https://stackblitz.com/edit/angular-infine-scroll-custombinding-jokeqi?file=app.component.ts.
In your update you have also mentioned that you want to perform the CRUD operation of the grid in the server side using Batch edit mode. For each CRUD operations performed the grid the ‘dataSourceChanged’ event will be triggered. Using this you can get the all changes in dataSourceChanged event’s argument when args.requestType as batchsave. Using this changes you can call your service and perform your action as per your requirement.
Please refer the below code example.
|
app.component.ts
export class NormalEditComponent implements OnInit {
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public editSettings: Object;
public toolbar: string[];
public state: DataStateChangeEventArgs;
customers: Customer[];
@ViewChild('grid')
public grid: GridComponent;
constructor(private crudService: CrudService) {
this.data = crudService;
}
getData(): void {
this.crudService.getAllData()
.subscribe((customers) => {
alert(JSON.stringify(customers));
});
}
public dataStateChange(state: DataStateChangeEventArgs): void {
this.crudService.execute(state);
}
public dataSourceChanged(state: DataSourceChangedEventArgs): void {
if (state.action === 'add') {
this.crudService.addRecord(state).subscribe(() => { this.grid.notify('recordAdded', state); state.endEdit() });
} else if (state.action === 'edit') {
this.crudService.updateRecord(state).subscribe(() => state.endEdit());
} else if (state.requestType === 'delete') {
this.crudService.deleteRecord(state).subscribe(() => {
state.endEdit();
});
} else if (state.requestType === 'batchsave') {
if ((state.changes as any).changedRecords.length > 0) {
this.crudService.batchChangedRecord(state).subscribe(() => {
state.endEdit();
});
}
if ((state.changes as any).addedRecords.length > 0) {
this.crudService.batchAddedRecord(state).subscribe(() => state.endEdit());
}
if ((state.changes as any).deletedRecords.length > 0) {
this.crudService.batchDeletedRecord(state).subscribe(() => state.endEdit());
}
}
}
public ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const state: any = { skip: 0, take: 12 };
this.crudService.execute(state);
}
}
|
The below screenshot shows the arguments that are passed to the server when CRUD operation is performed by using the batch editing mode. Here we have added a records and deleted one record from the dataSource and then clicked update button in the grid’s toolbar. Now the dataSourceChanged event is triggered and we can see the changes done in the dataSourceChanged event’s arguments that are highlighted in the below screenshot.
We have also attached a sample to perform CRUD operations using batch editing.
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#perform-crud-operations
Please find the attached sample and refer the help documentations and revert if you need any further assistance.
Regards,
Joseph I.
SIGN IN To post a reply.
