Angular Grid CRUD operations without using DataManager

[Jonas Blazinskas]

Hi,

I'm currently working on a project where I have an Angular Grid which gets it's dataSource filled by Objects from my API using Mongo. I did manage to get the data visualised in the Grid, but when I started working on the CRUD operations, I just couldn't find a way to do it without DataManager. My problem is, that I cannot access the dataSourceChanged. ​Any possibility anyone could help me out?

Grid html

<ejs-grid #locationGrid [dataSource]='locations' autoFit="true" allowResizing="true"

[editSettings]='editSettingsLoc' [toolbar]='locToolbar' showToolbar="true" allowFiltering="true"

[filterSettings]="filterSettings" height='30vh' (toolbarClick)='clickHandler($event)' (rowSelected)="onRowSelected($event)">

<e-columns>

<e-column field='name' headerText='Name'></e-column>

<e-column field='address' headerText='Address'></e-column>

<e-column field='postcode' headerText='Postcode'></e-column>

<e-column field='client_type' headerText='Client Type'></e-column>

<e-column field='priority' headerText='Priority'></e-column>

<e-column field='last_visit_readable' type="date" format="dd/MM/yyyy" headerText='Last Visit'></e-column>

<e-column field='upcoming_visit_readable' type="date" format="dd/MM/yyyy" headerText='Upcoming Visit'></e-column>

</e-columns>

</ejs-grid>

Grid ts file

public locations: Observable<DataStateChangeEventArgs>;

constructor(private locationService: LocationService) {}

ngOnInit(): void {

this.getLocations();

}

getLocations() {

this.locationService.getAllLocations().subscribe((data: any) => {

this.locations = data;

})

}

Service

constructor(private http: HttpClient) { }

getAllLocations(){

return this.http.get(API_URL + "getAll");

}

setLocation(location: any){

return this.http.post(API_URL + "set", location);

}

getLocation(id: any){

return this.http.get(API_URL + "get", id);

}

updateLocation(location: any){

return this.http.post(API_URL +"update", location);

}

deleteLocation(id: any){

return this.http.delete(API_URL +"delete", id);

}

addVisitToLocation(visit: any, id:any){

return this.http.post(API_URL + "addVisit", {

visit: visit,

_id: id

})

}

[Vinitha Balasubramanian]

Hi Frank Alberts,

Greetings from Syncfusion support.

Query : Angular Grid CRUD operations without using DataManager

Based on your query, we could see that you want to perform CRUD operation in the Grid component. We have already discussed about this topic in our UG documentation. Kindly refer the below documentation to achieve your requirement.

Documentation link : https://ej2.syncfusion.com/angular/documentation/grid/observables/#perform-crud-operations

Regards,

Vinitha Balasubramanian