Kendo Grid binding to .NET DataSourceResult with an array property

[esp]

Hi,

I have a Kendo UI grid which is binding to a GridDataResult. It fetches data from a .NET API and is using toDataSourceRequestString on a DataSourceRequestState to formulate the query parameters. The API is in turn returning a DataSourceResult.

The grid needs to support paging, sorting, filter and grouping. On returning grouped results, the front end is using translateDataSourceResultGroups to unpack the data.

The API currently returns something like this:

{
  "data":[
    {
      "foo":1,
      "bar":80,
      "baz":[
        {
          "date":"2017-04-01T00:00:00",
          "value":25
        },
        {
          "date":"2017-05-01T00:00:00",
          "value":27
        },
        {
          "date":"2017-06-01T00:00:00",
          "value":28
        }
    }, etc...
  ],
  "total":8,
  "aggregateResults":null,
  "errors":null
}

 

If I didn't need to use server side grouping etc then I could just flatten the "baz" property array before binding but with grouping the results get pretty complicated. Is it possible rather to bind the data as is and bind properties from the nested array as a column? For instance, in the example above, I am attempting to have columns:

"foo", "bar", "2017-04-01", "2017-05-01", "2017-06-01"

and the first record row values:

1, 80, 25, 27, 28

The "baz" array is a series of dynamic column + value pairs.

 

Any ideas appreciated. Thanks.

[Dimiter Topalov]

Hello,

As far as I understand the question, you can use the Angular *ngFor structural directive to loop through the array and generate a column for each item, then bind the respective Grid columns' field property to the nested data fields. You can use Cell templates to display the desired content coming from the nested collection, e.g.:

https://plnkr.co/edit/KT0QP814CNlMjyKHukC9?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[esp]

Thanks Dimiter.

That's not quite what I was after but it was enough prodding to figure out a solution.

 

Cheers.