Firebasertdb live data sync with no grid refresh
Hi Jonas,
Greetings from Syncfusion support.
Based on your query, we understand that you are trying to perform CRUD operation in the grid using the observable data. You have achieved to modify the cell details and addition of the records without refreshing the grid and maintaining the state of the scrollbar. However, while deleting the records, you are facing a grid refresh which makes the scroller to move to the top.
On inspecting the code example provided we can understand that you are performing all the CRUD operations manually and updating the datasource of the grid directly. We suggest you use the custom data binding. By default, in EJ2 Grid, while using custom data binding, when you perform grid actions like filtering, sorting etc. the ‘dataStateChange’ event is triggered and when you perform CRUD operations the ‘dataSourceChange’ event will be triggered. We have discussed the same in the below documentation for more details, please refer the below documentation.
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/remote-data#handling-crud-operations
For Each CRUD operations performed the grid the ‘dataSourceChanged’ event will be triggered. Using this you can get all changes in dataSourceChanged event’s argument when args.requestType as batchsave if you are using the batch editing. 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(); }); } }
public ngOnInit(): void { this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 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 an edit operation is performed. 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.
Sample: https://stackblitz.com/edit/angular-async-crud-320133-nzgvjld7?file=normal-edit.html
Regards,
Joseph I.
Hi,
We have reviewed your query, it seems when implementing the data binding using custom data binding approach, it seems that all the records are rendered in the same page. We would like to tell you that when binding the data in result and count format, for every grid action(such as Sort, Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.
For initial rendering:
Here for initial rendering the skip and take values should be set manually and sent to the server in the ngOnInit. Also set the sort and group settings data, to persist the state of the grid in the initial rendering of the grid.
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.
We have attached the sample for your reference.
Sample: https://stackblitz.com/edit/angular-grid-u7mdtf-8nsffxbb
Query: Grid data not updating when the database is updated:
To keep your Syncfusion EJ2 Grid in sync with real-time updates from Firebase (or any other real-time database), the grid must be manually updated on the client side when changes occur. Syncfusion EJ2 Grid does not automatically detect external database changes.
With Firebase, you can listen for data changes (e.g., using onValue, onChildChanged, etc. in the Realtime Database or Firestore listeners). When these events are triggered, you can then update the EJ2 Grid's data manually.
We also noticed that in the onValue, you get the updated data and using setCellValue method to update the data, we would like to tell you that setCellValue only updates the data in the UI level. We suggest you to use updateRow method and pass the rowData as the parameter.
The API documentation has been attached for your reference.
Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#updaterow
Please get back to us for further assistance.
Regards,
Dineshnarasimman M
