Integration with UI for ASP.NET Core

Updated on Sep 2, 2026

Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC include a DataSourceRequest model binder and a ToDataSourceResult() extension method. These let the server receive a Kendo UI component data-state object, apply the sort, filter, group, and page operations, and return the result in a format the component can consume directly.

Data Query provides the client-side helpers:

• toDataSourceRequestString—serializes the component State to a query string the DataSourceRequest model binder understands.
• translateDataSourceResultGroups—translates the grouped server response into the hierarchical format the component expects.
• translateAggregateResults—translates the aggregate portion of the server response.

How It Works

The integration follows a request-response cycle:

1. The component raises a data-state change event when the user sorts, filters, or pages the data.
2. The application calls toDataSourceRequestString to serialize the new state.
3. The serialized string is sent to the ASP.NET Core endpoint as a query string.
4. The server deserializes it using the DataSourceRequest model binder, applies the operations with ToDataSourceResult(), and returns the result as JSON.
5. If the data is grouped, the application calls translateDataSourceResultGroups and translateAggregateResults to convert the server response before passing it to the component.

Server-Side Controller

The following example demonstrates a minimal ASP.NET Core controller that processes a DataSourceRequest and returns the result:

csharp

using Microsoft.AspNetCore.Mvc;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetProducts([DataSourceRequest] DataSourceRequest request)
    {
        // Replace with a database query when using Entity Framework.
        var products = ProductRepository.All().AsQueryable();
        return Ok(products.ToDataSourceResult(request));
    }
}

Client-Side Integration

For a complete, runnable project, see the Kendo UI for Vue with ASP.NET Core sample on GitHub.

The following example demonstrates how to fetch Grid data in a Vue component:

js

import { toDataSourceRequestString, translateDataSourceResultGroups } from '@progress/kendo-data-query';

export default {
    data() {
        return { result: [], total: 0, dataState: { skip: 0, take: 20 } };
    },
    mounted() {
        this.fetchData(this.dataState);
    },
    methods: {
        dataStateChange(event) {
            this.dataState = event.data;
            this.fetchData(event.data);
        },
        fetchData(dataState) {
            const queryStr = toDataSourceRequestString(dataState);
            const hasGroups = dataState.group && dataState.group.length;

            fetch(`api/products?${queryStr}`)
                .then(response => response.json())
                .then(({ data, total }) => {
                    // Only grouped responses need remapping to the hierarchical format the Grid expects.
                    this.result = hasGroups ? translateDataSourceResultGroups(data) : data;
                    this.total = total;
                });
        }
    }
};

See Also

• Data Query Overview
• toDataSourceRequestString
• translateDataSourceResultGroups
• translateAggregateResults
• DataSourceRequestState