Integration with UI for ASP.NET Core
The UI for ASP.NET Core and UI for ASP.NET MVC suites provide a DataSourceRequest model binder and a ToDataSourceResult() method which process bulk data operations.
This article demonstrates how to set up a Grid to perform server-side CRUD operations by using these features in Angular applications and applying the Data Query helper functions.
Using with .NET Core
For a working example, refer to the Kendo Angular with ASP.NET Core project on GitHub. Follow the instructions in the readme file to run the project.
Sample Integration Project
To implement the sample project:
Prerequisites
Before proceeding, ensure that you have the following installed:
- System Requirements For Kendo UI for Angular
- Node.js 20
- Angular 18 CLI
- .NET Core 8 SDK
- Visual Studio Code or another code editor. Feel free to also check the Using .NET in Visual Studio Code guide for useful tips.
- Telerik Private NuGet Source (optional) for access to the
ToDataSourceResultmethod for Grid state management.
Setup
For more information on setting up the project, see the Kendo UI for Angular with ASP.NET Core article.
The ASP.NET Core controller must be configured to handle a DataSourceRequest object, which represents the state of the Grid. Once set up, the controller can fetch data from the database and process it using the ToDataSourceResult() method.
[HttpPost]
[Route("get-products")]
public ActionResult GetProducts([DataSourceRequest] DataSourceRequest request)
{
// Products is an in-memory list of Product objects and could be replaced with a database query.
var result = Products.AsQueryable().ToDataSourceResult(request);
return Ok(result);
}While the Angular application uses the toDataSourceRequestString method to parse the Grid state to the ASP.NET Core controller, if the data is grouped, you must also utilize the translateDataSourceResultGroups method to translate the data to a compatible format.
// The services that processes the Grid state requests.
public getProducts(state: State): Observable<GridDataResult> {
const url = `${this.baseUrl}products/get-products?${toDataSourceRequestString(state)}`;
const hasGroups = state.group && state.group.length;
return this.http.post<GridDataResult>(url, {}).pipe(
map(({ data, total }) => ({
// If the data is grouped, translate it to a compatible format using the translateDataSourceResultGroups helper.
data: hasGroups ? translateDataSourceResultGroups(data) : data,
total: total,
}))
);
}