Search code examples
angularasp.net-coreangular5odatakendo-ui-angular2

ASP.NET Core OData web service, Angular 5 and Grid Component in Kendo UI for Angular


I would like to know if there is an easy way to bind Kendo 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 returns JsonResult instead. 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 'reusable'.

​ 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, Angular 5, latest Kendo UI for 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/ )


Solution

  • 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):

    DOCS

    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