GridDataResult properties

[AGISDev]

This is the footprint of my web api

public DataSourceResult GetItems([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)

Fiddler shows data being returned from the api as expected.

In my Angular service I have

return this.http
  .get<GridDataResult>(`${this.url}?${queryStr}`)
  .map(({data, total}: GridDataResult) =>
    (<GridDataResult>{
      data: data,
      total: total,
    })
);

In this case, my grid displays no records.  If I change "data" to "Data" and "total" to "Total", my IDE complains

error TS2551: Property 'Data' does not exist on type 'GridDataResult'. Did you mean 'data'?
error TS2551: Property 'Total' does not exist on type 'GridDataResult'. Did you mean 'total'?

but.. with the "D" and the "T" I get data bound to the grid in spite of the compiler error (sometimes Node throws a message that there are compiler errors but usually the page displays data).  Fiddler shows the api returning "Data" where the console in the browser shows "data".

I've deleted everything and installed from scratch.  I updated all of my packages to latest including the Kendo packages.

I was suspicious of my install as in HTML files I receive an error on the Kendo tab, kendo-grid-column generates an error that it is not in the current scope.  This is an IDE error and when I run, the gird looks fine. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Dimiter Topalov]

Hi,

The issue seems to be a purely TypeScript one resulting caused by the server response containing capitalized Data and Total properties whereas the GridDataResult type expect lower-case ones.

You can try returning the object with correct casing from the server, or mapping it on the client, e.g. ... .map({Data, Total} =>)({data: Data, total: Total})), or remove the explicit GridDataResult typing altogether, and check whether this will resolve the described error.

If the issue persists, please send us an isolated runnable project with a simple back end (perhaps just a controller, returning a couple of hardcoded data items) so we can observe the whole setup, and try to provide a solution that is most suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[AGISDev]

This basic example demonstrates the issue.

[Lynden]

Hi

Im not sure if this would help in your case, but I have made a simple rxjs operator that maps odata result or an array into a GridMapResult.

The gist can be found here https://gist.github.com/lucasheight/ca1a1063b3a2c894dbed20d9ddb6811f and a demo here https://stackblitz.com/edit/angular-kendo-grid-gridmap

Cheers

Lynden

[Dimiter Topalov]

Hi Charles,

Thank you for the provided projects. The client-side TypeScript error is resolved when changing the response type to "any" and casting the result to GridDataResult when mapping the response:

public fetch(): Observable<any> {
    return this.http
      .get<any>(`${this.url}`)
        .map(res  =>
            ({
              data: res.Data,
              total: res.Total,
            } as GridDataResult)
        );
  }

However, there seemed to be multiple server-side issues that prevented me to receive and inspect the specific response:



The controller action seems to not being reached at all as a breakpoint put inside it never gets hit. Anyway, based on the provided code I can suggest returning a JsonResult from the controller action like in the following example from our documentation:

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

You can also inspect the working sample project created with the explained setup that can possibly help apply the necessary adjustments on your end.

It is also worth mentioning that after .NET Core was introduced, there is a special configuration handling the casing of the JSON response properties:

https://codeopinion.com/asp-net-core-mvc-json-output-camelcase-pascalcase/

Regards,
Dimiter Topalov
Progress Telerik