Using Grid with rest http service via angular

[Daniel]

Do you have any examples on using the kendo ui grid for angular with a CRUD rest web service?

[Dimiter Madjarov]

Hi Daniel,

Yes, you could check our editing demos for similar scenarios like the one on your end. For example this one demonstrating editing in reactive form

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

Regards,
Dimiter Madjarov
Progress Telerik

[kunal]

The editing demos work with a JSONP callback type api. Is there a sample with just regular GET & POST. I was having a hard time getting this to work with plain REST apis

[Dimiter Madjarov]

Hi Kunai,

We don't have such example on our site. However you could check this one, which was provided by our client and covers similar case.

Regards,
Dimiter Madjarov
Progress Telerik

[Ron]

I ended up modifying the BehaviorSubject example that was shown in the Edit tutorial. The component is the reactive forms version which may or may not be what you're using but the service should at least have what you need to get started.

[Dimiter Madjarov]

Hello Ron,

Thank you for sharing this with the community.
I wish you great holidays.

Regards,
Dimiter Madjarov
Progress Telerik

[Glenn]

Ron with your solution how did you refresh the grid?

I've implemented the solution and the CRUD is working fine to the database however my angular page wont change unless "F5" is triggered.

Thanks 

[Ron]

Glenn,

I remember having that issue earlier myself and unfortunately I'm not 100% sure how it got resolved. I did switched the basis of the service to ClientHttp recently and noticed it was working.

My data component is still firing up 'this view = this.myservice.map(data => process(data, this.gridData));' and 'this.myservice.read();' so there's nothing new that I can see over there.

One thing that can cause refresh to not happen, even with this structure, is if you're working off of multiple services (or multiple Observables). Technically this won't go back out to your ORM (in my case EF Core) unless you force a read. The way Angular seems to offer refresh is by pushing your create, update, and delete back through that same observable/service that the grid is on.

One of the moderators might be able to look at both of my models and spot what the difference might be. For now I'm still at a point where I'm cobbling this together and getting things to work mostly by trial and error.

 

[Glenn]

Amazing reply thank you such detail.

Last minute Friday I removed my server side rendering and also the server paging and had a bit more success with the grid changing on updating

Thanks for the suggestion re httpclient, will have a crack with that Monday and then will slowly reintroduce the rendering and paging and then hopefully we might have a nice generic CRUD service.

[Paul]

How did you inject your edit service and httpclient into your provider?  Also are you using the shared provider with a client and server split config?

[Ron]

Paul, not 100% sure I understand the question. Are you asking how I'd apply it in the component, how I'd register it in the app.module, or something else?

[Paul]

Sorry.  Yes applying it to your app.module.  I am using the asp.net core template and there is a shared module and I am trying to apply it there and I am getting various errors.  My latest error is no provider for InjectionToken DocumentToken. 

This is a summary since my dev box is not internet connected.

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { EditService } from '../services/edit.service';
...
imports: [
HttpClientModule
],
providers: [
{ deps: [HttpClient],
provide: EditService,
useFacorty: (es: HttpClient) => () => new EditService(es)
}

 

[Ron]

Paul, first of all sorry for the belated response. When I hear injector token mentioned I'm wondering if you might be missing something on one of your services.

See if you can trace which particular service is giving you this error, my guess is you'll probably find the first line of the following missing:

@Injectable()

export class MyCRUDService extends BehaviorSubject<any[]>{

...

}

 

If you already have the @Injectable() at the top of your class then it could be something more complicated and, if it refers you back to app module, my best advice would be to open one of the relevant demos as a Plunkr and see if you can spot the module or other reference that's missing.