ASP.Net Core 2 Angular 2 project - data population in sort grid on load

[Ron]

I've been working with a Telerik sortable Grid in an ASP.Net Core 2 Angular 2 SPA, the data I'm attempting to implement a working instance of this with the fetchdata.component that comes with the initial rendering of the Angular 2 SPA. I've been able to load data into the grid but the data only seems to populate after a filter field is activated by mouse click. On initial load the grid will show up empty with 'No records available' under the first column leaving all other non-header data empty.

I have noticed that there's an example for data binding OData sources on the Telerik site however the super(null) for northwind.service.ts received an error suggesting that a null value wouldn't be permitted thus I wasn't able to experiment much with the code. Attached below is my attempt so far to code the typescript and html files for the Telerik sorting grid. Again, this gets me as far as the grid receiving data however the initial load is not populating the data. As far as I can tell the OData example implies that I might need to feed a BehaviorSubject array to the gridView but I'm not entirely sure whether that's baked in as a requirement or whether its relevant to an http.get from ASP.Net and Entity Framework. Let me know if you have any suggestions on how this needs to be rearranged or what I'd need to add in order to get this up and running properly. Thank you!

 

[Dimiter Topalov]

Hello Ron,

This question was already addressed in a private ticket thread, but I will also paste the answer here so others can benefit as well:

Looking at the code you have provided, I suspect that the behavior in question is caused by the asynchronous call. Most probably the request to the server is not yet completed when the loadForecasts method is executed from the ngOnInit lifecycle hook. Thus, there is no data to be shown in the Grid component.

In order to make this work, you should call the loadForecasts when the request has ended, similar to the following:

constructor(private http: Http, @Inject('BASE_URL') baseUrl: string) {
    http.get(baseUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
        this.forecasts = result.json() as WeatherForecast[];
        this.loadForecasts();
    });
}

On a side note, please choose only one of the threats to continue the communication in (if needed), to avoid possible duplicates and potential misunderstanding. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter - we tried that and it was exactly what we needed. We greatly appreciate your help and Rosen's on this.

On a side note we're working our way through the process of trying to set up grid editing and filtering by way of an api call. I see that the example on the site is using jasonp as the transfer method from an online data source and we're attempting a similar type of translation. I'm sure many users will be using ASP.Net/Angular 2 SPA or similar REST models and any demos covering that side of the programming will probably beneficial to a wide range of users.

Thank you again for your prompt response and also let me know if there are already any grid tutorials, especially for editing or filtering, that show a working model of http implementation.

[Dimiter Topalov]

Hi Ron,

We are glad that the provided suggestions proved helpful.

The only reason for our online demos to use a JSONP service is to avoid CORS-related issues. If you are using REST API that is on the same domain, or have otherwise allowed requests from the client application, you can consume the API in a regular manner.

You can check out the following tutorial for handling data operations on the server automatically (it does not include editing) if you would like to use server-side paging, filtering, etc:

http://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

Let us know if you have further questions.

Regards,
Dimiter Topalov
Progress Telerik