How to use Angular HTTP service for Grid operations
5 Replies
Hi Ameet,
Greetings from syncfusion grid
Query#: My requirement is to use the reactive form. For some reason it never calls the datasourcechanged event. Do you have any sample that works?
Based on your requirement we have prepared a sample with reactive form. The dataSourceChanged event gets triggered and works fine from our end. Please refer the below code example and sample for more information. Please refer the below details about the Grid add action code example with Observable.
ADD
The following codesnippets are based on the grid row Add action.
While adding a row, at first actionBegin event gets triggerd. In that event we have called the createFormGroup() method with arguments rowdata.
|
actionBegin(args: SaveEventArgs): void {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
this.submitClicked = false;
this.orderForm = this.createFormGroup(args.rowData);
}
if (args.requestType === 'save') {
this.submitClicked = true;
if (this.orderForm.valid) {
args.data = this.orderForm.value;
} else {
args.cancel = true;
}
}
}
|
In this createFormGroup() method we are create the form group with using default value of inputs.
|
createFormGroup(data: IOrderModel): FormGroup {
return new FormGroup({
id: new FormControl(data.id, Validators.required),
name: new FormControl(data.name, Validators.required)
});
}
|
After entering the value and saving the form, now the datasourcechanged gets triggered. In that event we have called the addRecord() method which was defined in the crudService.
|
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();
});
}
} |
|
crudService.ts
/** POST: add a new record to the server using the observable concept */
addRecord(state: DataSourceChangedEventArgs): Observable<Customer> {
return this.http.post<Customer>(this.customersUrl, state.data, httpOptions);
} |
Now the dataStateChange event gets triggered. Here we have called the execute method to achieve this. Please refer the workflow of the execute method one by one.
|
public dataStateChange(state: DataStateChangeEventArgs): void {
this.crudService.execute(state);
} |
|
crudService.ts
public execute(state: any): void {
this.getAllData().subscribe(x => super.next(x as DataStateChangeEventArgs));
} |
|
crudService.ts
/** GET all data from the server */
getAllData(): Observable<any[]> {
debugger;
return this.http.get<Customer[]>(this.customersUrl)
.map((response: any) => (<any>{
result: response,
count: response.length
}))
.map((data: any) => data);
} |
Screenshot:
Regards,
Balaji Sekar.
Balaji Sekar.
SIGN IN To post a reply.
