Extend DataSourceResult with new property

[AGISDev]

Looking at this post from another one of your boards.

https://www.telerik.com/forums/extend-kendo-mvc-ui-datasourceresult-with-new-property

I'm doing the exact same thing with Angular.  I managed the web service changes so the data is returned to Angular but I've not been successful at extracting the extra data and to keep functionality like sort/filter working.

 

 

 

 

 

 

[Dimiter Topalov]

Hi Charles,

The DataSourceRequest model binders and ToDataSourceResult() extensions are a part of the the UI for ASP.NET Core and UI for ASP.NET MVC products and I can suggest opening a separate thread for one of these products with specific questions that are most relevant to these products to ensure that you will receive the most comprehensive response. Providing some isolated runnable projects where the issue can be observed will also help our specialists to provide the most relevant feedback.

As far as the Kendo UI for Angular components in general, and the Grid in particular, are concerned, they are agnostic of where their data comes from - it just needs to be in a specific format so that the Grid can be successfully bound to it - an array of data items, a GridDataResult object with "data" and "total" properties when paging/virtual scrolling is involved, or an Observable of any of these two types. Further details are available in the following section of our documentation:

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

We also have a documentation article and a runnable .NET Core + Angular + Kendo UI for Angular Grid sample project that demonstrates how to integrate the DataSourceRequest/ToDataSourceResult for processing the data on the server, and sending requests and consuming the result in the Angular Data Service and the Grid that might help point you in the right direction:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[AGISDev]

my web service returns this (copied from your board)l

  IEnumerable<MyData> result = GetMyData();

  DataSourceResult x = result.ToDataSourceResult(request);
  KendoDataSourceResult returnResult = new KendoDataSourceResult(x);

  //Set my new property here
  returnResult.UserMessage = "My Test User Message<br/>Second line here<br/>Third line here";
  return Json(returnResult, JsonRequestBehavior.AllowGet);

 

Now, I want to get at the value stored in UserMessage, in an Angular Service/Component.

I'm doing exactly the same thing as this post, but in Angular.

https://www.telerik.com/forums/extend-kendo-mvc-ui-datasourceresult-with-new-property

What board would you like that posted on?

 

 

[AGISDev]

Here is your example.  I only changed a few lines from your master git.

\Controllers\SampleDataController.cs (added my custom field)

\ClientApp\src\app\fetch-data\data.service.ts (really didn't change, just used ??? in the .get).

[Dimiter Topalov]

Hi Charles,

Thank you for the provided sample project. We will need some time to inspect and run it and try to provide a solution that is most suitable to the specific use case. I will write back as soon as we are ready.

Regards,
Dimiter Topalov
Progress Telerik

[Dimiter Topalov]

Hi Charles,

You can consume and display the attached custom message in the same manner as the other part of the HTTP response (the object with Grid total and data properties). The only difference is that now the response no longer fits the GridDataResult type, so this should be addressed accordingly to keep TypeScript happy - either create a new custom type extending the GridDataResult one and holding the custom message field too, or change the received type to any:

// in the data service:

public fetch(state: DataSourceRequestState): Observable<any> {
        const queryStr = `${toDataSourceRequestString(state)}`;
        const hasGroups = state.group && state.group.length;

        return this.http
            .get(`${this.BASE_URL}?${queryStr}`)
            .map(({ data, total, myMessage }: any) =>
                (<any>{
                    data: hasGroups ? translateDataSourceResultGroups(data) : data,
                    total: total,
                    myMessage: myMessage
                })
            )
    }

// in the component file

<kendo-grid
            [data]="products"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [sortable]="true"
            [pageable]="true"
            [scrollable]="'scrollable'"
            [groupable]="true"
            [group]="state.group"
            [filterable]="true"
            [filter]="state.filter"
            (dataStateChange)="dataStateChange($event)"
            [height]="370">
</kendo-grid>
My mesage: {{myMessage}}

public myMessage;

constructor(private dataService: DataService) {

        this.dataService.fetch(this.state).subscribe(r => {

            this.products = r;

            this.myMessage = r.myMessage;

        });

 

    }

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik