Skip to main content

Kendo UI grid and ASP.NET OData v4 Web API controller

In a project of mine I had to display a grid on a webpage that has multiple functions like (server) paging, (server) filtering and similar features. Since we already bought licences for the famous Telerik components, we chose to take the Kendo UI grid for that requirement. On the server side there was a ASP.NET Web API 2 controller that supports an OData v4 interface.

The setup of the Kendo UI grid was done quickly and easily, but unfortunately the server paging feature did not work. Instead of showing paged results the grid was empty at all. Inspecting the request sent to the Web API controller revealed that the Kendo UI grid sent the query parameter $inlinecount=allpages that the controller obviously did not like. The response from the server was The query parameter '$inlinecount' is not supported.

A request from Kendo UI grid when being configured for OData v3.
A request from Kendo UI grid when being configured for OData v3.

I took me almost two hours to figure out the solution – which was quite easy indeed. In the configuration of the data source for the Kendo UI grid, the type of the data source was specified wrong. Instead of using <code>odata</code> I rather have to use <code>odata-v4</code>. Once this configuration was changed, everything works fine and as expected!

$scope.mainGridOptions = {
    dataSource: {
        type: "odata-v4",
        transport: {
            read: {
                url: ... + "/api/controller",
                dataType: "json"
            }
        },
        serverPaging: true,
        pageSize: 20
    },
    pageable: true,
    ...
};

By changing the data source type attribute to odata-v4 the request from the grid changes to

http://localhost:57817/api/historyentries?%24format=json&%24top=20&%24count=true

4 Gedanken zu „Kendo UI grid and ASP.NET OData v4 Web API controller

  1. Can you show me the service side code? Using the „odata-v4“, I can just get the data of the first page, because there is no total amount in the result message.

    1. In your WebApiConfig.cs just add the query filter configuration as following:
      config.AddODataQueryFilter();

      After that I defined an additional enpoint for the OData feature:
      var builder = new ODataConventionModelBuilder();
      builder.EntitySet("customtypes");
      config.EnableEnumPrefixFree(true);
      config.MapODataServiceRoute(
      routeName: "ODataRoute",
      routePrefix: "api",
      model: builder.GetEdmModel()
      );

      The controller function just carries the „EnableQuery“-Attribute:
      [EnableQuery]
      public IQueryable Get() {...}

Schreibe einen Kommentar zu Kevin Smith Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.