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

Getting Started with Kendo UI for Angular in an ASP.NET Core Application

This article provides a step-by-step guide that uses the Microsoft Angular Project Template to create a new Angular application with ASP.NET Core and integrate the Kendo UI for Angular component library.

Want to jump straight to the runnable application? Check out the Kendo UI for Angular Data Grid and Upload Integration with ASP.NET Core application and follow the steps in the README.

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 ToDataSourceResult method for Grid state management.

The mentioned versions are the latest as of July 31, 2024, at the time of writing this article.

Create a New Angular Application with ASP.NET Core

To create a new Angular application with ASP.NET Core:

Open a terminal or command prompt and run the following command to create a new Angular application with ASP.NET Core:
bash
```
dotnet new angular -o KendoAngular-ASPNETCore-App
```
This command creates a new Angular application with ASP.NET Core in a folder named KendoAngular-ASPNETCore-App. The new angular command is part of the Microsoft Template Arguments.
Navigate to the newly created project folder:
bash
```
cd KendoAngular-ASPNETCore-App
```
Build the application to ensure that everything is working correctly:
bash
```
dotnet build
```
Run the application:
bash
```
dotnet run
```
In the terminal, you will see a message similar to the following:
bash
```
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000
```
The port number will be different on different machines.

Open a browser and navigate to the displayed URL to see the application running. The Angular application will need some time to build and load the first time you run it.

Update ASP.NET Core and Angular Versions

The default Angular and ASP.NET Core versions in the Microsoft Angular Project Template might not be the latest. To update the Angular version, follow these steps:

Navigate to the ClientApp folder in the project.

bash

  cd ClientApp

Update the Angular CLI by following Angular's update guide.
To update the ASP.NET Core versions, make sure that you have the .NET Core 8 SDK installed and follow the official ASP.NET Core migration guide.

Now that you have updated the Angular and ASP.NET Core versions, you can proceed with integrating Kendo UI for Angular.

Integrate Kendo UI for Angular

To demonstrate how to integrate Kendo UI for Angular with the ASP.NET Core application, this guide will show you how to add a Grid component:

Navigate to the ClientApp folder in the project.
bash
```
cd ClientApp
```
Install the Kendo UI for Angular Data Grid by running the following command:
bash
```
ng add @progress/kendo-angular-grid
```

Add the Kendo UI for Angular Data Grid module to the app.module.ts file:

import { GridModule } from '@progress/kendo-angular-grid';

@NgModule({
    imports: [
        GridModule
    ]
})

Add a Kendo UI for Angular Grid component to the home.component.html file:

html

<kendo-grid [data]="gridData">
    <kendo-grid-column field="productID" title="Product ID">
    </kendo-grid-column>
    <kendo-grid-column field="productName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="unitPrice" title="Unit Price">
    </kendo-grid-column>
</kendo-grid>

Create a Product class in the Models folder:

namespace Kendo_ASP.NET_Core_Angular.Models
{
    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

If the Models folder does not exist, create it in the root of the project.

Create an ASP.NET Core controller that retrieves the data from a database. For simplicity, this example uses static data in the backend.

using Microsoft.AspNetCore.Mvc;
using Kendo_ASP.NET_Core_Angular.Models;

namespace Kendo_ASP.NET_Core_Angular.Controllers
{
    [ApiController]
    [Route("products")]
    public class ProductController : ControllerBase
    {
        private static List<Product> Products = new List<Product>
        {
            new Product
            {
                ProductID = 1,
                ProductName = "Chai",
                UnitPrice = 18,
            },
            new Product
            {
                ProductID = 2,
                ProductName = "Chang",
                UnitPrice = 19,
            },
            new Product
            {
                ProductID = 3,
                ProductName = "Aniseed Syrup",
                UnitPrice = 10,
            }
        };

        [HttpGet]
        public IEnumerable<Product> Get()
        {
        return Products;
        }
    }
}

Update your proxy.conf.js in the ClientApp folder to include the new route:

const PROXY_CONFIG = [
    {
        context: [
            "/weatherforecast", // Added by default
            "/products" // Your newly created API route
        ],
    }
];

module.exports = PROXY_CONFIG;

Create an Angular service to fetch the data from the ASP.NET Core controller, and then update the product.service.ts file:

bash

ng generate service services/product

import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
    providedIn: 'root'
})
export class ProductService {
    private baseUrl = '';

    constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
        this.baseUrl = baseUrl; // Retrieve the API URL from the app module.
    }

   public getProducts(): Observable<any[]> {
        return this.http.get<any[]>(this.baseUrl + 'products');
    }
}

Update the home.component.ts file to fetch the data from the service:

import { Component } from '@angular/core';
import { ProductService } from '../services/product.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
})
export class HomeComponent {

public gridData: unknown[] = [];

constructor(private productService: ProductService) { // Inject the service.
    this.productService.getProducts().subscribe({
        next: (result) => {
        this.gridData = result;
        },
        error: (error) => {
        console.error(error);
        }
      });
    }
  }

Run the application:
bash
```
dotnet run
```

The application will now display the Kendo UI for Angular Data Grid with the data fetched from the ASP.NET Core controller.

Perform Data Operations and Handle File Uploads

The next task is to manage the data state and perform CRUD operations using the Kendo UI for Angular Grid. Additionally, you will explore how to handle file uploads with the Kendo UI for Angular Upload component in conjunction with ASP.NET Core.

Handling Grid Data Operations

There are few ways to handle data operations with the Kendo UI for Angular Grid. This article explores the two most common of them:

Client-side Operations: You can use the process method to handle data operations like sorting, filtering, and paging on the client. For more information, refer to the Data Operations article.
Server-side Operations: The server-side operations can be handled by using the ToDataSourceResult method from the Telerik ASP.NET MVC UI library.

To use the ToDataSourceResult method, you need to install the Telerik ASP.NET MVC UI NuGet package source by following the Installing Telerik UI for ASP.NET MVC Using NuGet Packages or use the .NET CLI installation guide, which this article follows.

Run the following command to install the necessary packages in the ASP.NET Core project:
bash
```
dotnet add package Kendo.Mvc
dotnet add package Kendo.Mvc.Extensions
```

This method will require you to convert the Grid State to toDataSourceRequestString or translateDataSourceResultGroups (if the data is being grouped) and send it to the server where the ToDataSourceResult method will handle it for you.

Handling Data Grid CRUD Operations

CRUD operations can be handled by using the add, edit, save ,cancel and remove events. For more information, refer to the Editing Basics article. On the server side, you need to handle the Post, Put, Get, and Delete requests to handle the CRUD operations.

The following application demonstrates how to handle data and CRUD operations with the Kendo UI for Angular Data Grid and ASP.NET Core:

Kendo UI for Angular Data Grid and Upload Integration with ASP.NET Core

The application uses static data, but in a real-world scenario, you need to replace the static data with data from a database. Entity Framework Core can be used to handle the database operations. For more information, refer to the Entity Framework Core article.

Handling Files Using Upload Component

On the client side, add the saveUrl and removeUrl properties to the Upload component to handle the file upload and remove operations. The saveUrl and removeUrl properties should point to the server-side methods that handle the file upload and remove operations.

On the server side, handle the uploaded files by using the IFormFile interface. For more information, refer to the Upload files in ASP.NET Core article.

The Kendo UI for Angular Grid and Upload Integration with ASP.NET Core application demonstrates how to handle file and chunk uploads with the Kendo UI for Angular Upload component and ASP.NET Core.