New to Kendo UI for Angular? Start a free 30-day trial

toDataSourceRequestString

Function

Definition

Package:@progress/kendo-data-query

toDataSourceRequestString

Converts a DataSourceRequestState into a string that is comparable with the DataSourceRequest format in UI for ASP.NET MVC.

Parameters:stateDataSourceRequestState

The state that will be serialized.

string

The serialized state.

The following code snippet demonstrates how to use the toDataSourceRequestString method.

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import {
    DataSourceRequestState,
    toDataSourceRequestString,
    translateDataSourceResultGroups,
    translateAggregateResults
} from '@progress/kendo-data-query';

export class ProductService {
    private BASE_URL = 'https://api.example.com/products';

    constructor(private http: HttpClient) { }

    public fetch(state: DataSourceRequestState): Observable<GridDataResult> {

        // DataSourceRequestState includes:
        // - State properties: skip, take, sort, filter, group
        // - Additional property: aggregates
        const queryString = toDataSourceRequestString(state);

        const hasGroups = state.group && state.group.length;

        return this.http
            .get<ServerResponse>(`${this.BASE_URL}?${queryString}`)
            .pipe(
                map(({ Data, Total, AggregateResults }) => ({
                    data: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                    total: Total,
                    aggregateResult: translateAggregateResults(AggregateResults)
                }))
            );
    }
}