toDataSourceRequest

Updated on Jan 15, 2026

Converts a DataSourceRequestState into an object that is compatible with the DataSourceRequest format in UI for ASP.NET MVC.

Parameters

state

DataSourceRequestState

The state that will be serialized.

Returns

any

The serialized state.

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

ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import {
    DataSourceRequestState,
    toDataSourceRequest,
    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 dataSourceRequest = toDataSourceRequest(state);

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

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