How to integrate Kendo UI for Angular(4) with Progress Data Object Service?

[Saurabh]

In KendoUI Builder, we mention about Service URI and Catalog URI. REST service is also created using Progress App Server.

How to display Progress RDBMS data in KendoUI for Angular(4)?

[Dimiter Topalov]

Hello Saurabh,

In general the Kendo UI for Angular components that support data binding (like the Grid, Charts, and DropDowns) are agnostic to where their data comes from and can be bound to plain arrays, special DataResult object (for the Grid) or Observables (via the async pipe). Further details about various data binding approaches are available in the respective sections of our documentation:

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

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

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

For example, binding the Grid to a remote end point via a custom service is demonstrated in the following online demo:

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

The Grid emits events like pageChange, sortChange and filterChange that contain the required information for issuing a remote request that will obtain the necessary processed data set (in server-side data operations scenarios). If the whole data set is available on the client, it can be processed accordingly with the Data Query process() function.

The most convenient approach for handling all data operations in a single place is utilizing the DataStateChange event that combines all other data operations-related events, and provides a State object containing all paging, sorting, filtering and grouping descriptors as event data.

The Grid also provides directives for automatic binding that abstract away all processing of the data:

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

To sum up - you can utilize any backend that returns a JSON containing the data (and for paging purposes - the total number of data items) and create a custom Angular data service for communicating with this backend by issuing the appropriate requests. The general workflow is as follows:

1) The end user interacts with the Grid by sorting, filtering, paging or grouping via the UI

2) The dataStateChange event is emitted with the respective skip, take, sort, filter, and group properties that reflect the current state change

3) In the event handler the respective method of the Angular data service, responsible for fetching the data from the remote server is called and the State is passed to it

public dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.service.query(state);
    }

4) In the data service fetch method a HTTP request to the remote back end is performed and the response is processed to match the format, expected by the Grid

public query(state: any): void {
        this.fetch(this.tableName, state)
            .subscribe(x => super.next(x));
    }

    protected fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;

        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .pipe(
                map(response => (<GridDataResult>{
                    data: response['value'],
                    total: parseInt(response['@odata.count'], 10)
                }))
            );
    }

5) The Grid is updated to display the incoming processed data set

In this example, the Grid is directly bound to the Observable, coming from the data service:

<kendo-grid
          [data]="view | async"...

constructor(private service: CategoriesService) {
        this.view = service;
        this.service.query(this.state);
    }

Currently we do not have a runnable demo that features a Grid bound to a REST service, created by the Progress App Server, but one of the teams is working on enhancing the Kendo UI Builder with the feature to generate Angular (4/5+) applications too, so you can expect this in the near future. Meanwhile, as previously described, you can create a custom Angular data service that can communicate with any backend and bind the Grid to it - it can display any data collection.

Let us know if you have any additional questions related to the Kendo UI for Angular components.

Regards,
Dimiter Topalov
Progress Telerik