New to Kendo UI for AngularStart a free 30-day trial

toDataSourceRequestString

Updated on Jan 16, 2026

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

Parameters

state

DataSourceRequestState

The state that will be serialized.

Returns

string

The serialized state.

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

ts
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)
                }))
            );
    }
}
Not finding the help you need?
Contact Support