ASP.NET Core, OData and Grid in Kendo Angular

[mctl87]

Hello,

I would like to know if there is an easy way to bind Angular Grid to ASP.NET Core OData controller. What do I mean by easy ?

Well, in Kendo UI for jQuery all we need to do is to specify a 'type' and 'transport' properties in DataSource object; reference: https://demos.telerik.com/kendo-ui/grid/odatav4 

Same applies for Kendo for ASP.NET MVC; reference: https://demos.telerik.com/aspnet-mvc/grid/odata

However, I think that I have already went through whole documentation and I cant find a way to bind OData service with Kendo Angular Grid in the similar way.

This page contains some information about Grid Data Binding: https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

...however, 'northwind.service.ts' file which expose ProductService class contains two methods and it looks like they perform some sort of 'hardcoded' OData filtering.

In the "Integration with UI for ASP.NET Core" page (https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/) there is a link to this project: https://github.com/telerik/kendo-angular-demo-aspnetcore-data/tree/master , however ASP.NET Core Controller which serve as a backend is not based on ODataController and does not return JsonResult. Maybe there's a way to change backend implementation, however I'm not sure if everything will work properly using provided client-side code.

I also found this GitHub repo: https://github.com/urfnet/URF.Core.Sample , which looks very promising, there's a dedicated 'service' which seems to handle all http actions (GET,POST,PUT..) and looks very 'resuable'.

 

Am I missing something or is there no easy way ? Do I really need to write my own service to handle Kendo Angular Grid and ASP.NET Core Odata communication ?

 

(I'm using ASP.NET Core 2.1, latest Kendo Angular and OData package which is described in this article: https://blogs.msdn.microsoft.com/odatateam/2018/07/03/asp-net-core-odata-now-available/ )

[mctl87]

Sorry, small mistake, it should be:
".. as a backend is not based on ODataController and returns JsonResult instead."

[Dimiter Topalov]

Hello Michał,

I assume this is the same question, as the one discussed in this StackOverflow thread:

https://stackoverflow.com/questions/52890249/asp-net-core-odata-web-service-angular-5-and-grid-component-in-kendo-ui-for-ang/52895062#52895062

I will paste the answer here too so it is available to other members of the community:

The Kendo UI for Angular Grid is agnostic of where its data comes from, and relies on emitting events containing the necessary information for processing the data (or performing a remote HTTP request):

https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-binding/automatic-operations/

The examples that communicate with a sample OData backend also utilize the Data Query toODataString helper function that transforms the incoming Grid state to an OData4-compatible string.

You can either create a data service that will receive the Grid state and will handle the remote HTTP requests and response (that will be eventually consumed by the Grid), or create a custom autobinding directive that will abstract away all data-related operations, e.g.:

EXAMPLE with step-by-step instructions

Regards,
Dimiter Topalov
Progress Telerik

[mctl87]

Dimiter,
Looks like it works in a bit different way than Kendo for jQuery or MVC. Anyway, I have already managed to get it working using provided samples. Thank you very much!

[Augusto]

Hi mctl87,

Can you provide some sample code and guidelines on how you achieved connecting the kendo angular grid to an asp net code odata controller?

I would appreciate it a lot.