Kendo UI for Angular

https://www.telerik.com/kendo-angular-ui/
Admin
Kendo UI for Angular is a comprehensive component library providing 110+ professionally-designed UI...
Tokens:2,315,168
Snippets:29,992
Trust Score:10
Update:6 days ago
Show doc for...
Tokens:
Raw
### Install Kendo CLI globally

Source: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started

Installs the Kendo CLI globally to enable the Getting Started Assistant and other setup commands.

```sh
npm i -g @progress/kendo-cli@latest
```

--------------------------------

### Manual Setup - Install Grid Package and Dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/installation/using-modules

Installs the Grid package along with all required peer dependencies in one command.

```sh
npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-label @progress/kendo-drawing @progress/kendo-angular-excel-export @progress/kendo-angular-buttons @progress/kendo-angular-common @progress/kendo-angular-pdf-export @progress/kendo-angular-popup @progress/kendo-licensing @progress/kendo-angular-icons @progress/kendo-angular-layout @progress/kendo-angular-utils
```

--------------------------------

### Invoke Getting Started Assistant

Source: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started

Prompts the Getting Started Assistant in the AI chat interface to create a new Angular project.

```prompt
#kendo_getting_started_assistant create a new Angular project
```

--------------------------------

### Install dependencies, build, and run the generated Angular app

Source: https://www.telerik.com/kendo-angular-ui/components/installation/kendo-cli-angular-setup

After generating the project, navigate into the project directory, install dependencies, build the app, and start the development server.

```sh
cd MyAngularBlankApp
npm install
ng build
ng serve
```

--------------------------------

### Install Spreadsheet package and dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/spreadsheet/installation/manual-setup

Run this npm command to install the Spreadsheet package along with all required peer dependencies. This is the first step of the manual setup.

```sh
npm install --save @progress/kendo-angular-spreadsheet @progress/kendo-angular-common @progress/kendo-angular-buttons @progress/kendo-angular-dialog @progress/kendo-angular-dropdowns @progress/kendo-angular-icons @progress/kendo-angular-inputs @progress/kendo-angular-l10n @progress/kendo-angular-label @progress/kendo-angular-layout @progress/kendo-angular-menu @progress/kendo-angular-popup @progress/kendo-angular-toolbar @progress/kendo-angular-intl @progress/kendo-licensing
```

--------------------------------

### Quick Start: Download and Activate License with npm

Source: https://www.telerik.com/kendo-angular-ui/components/licensing

Run these commands in your project terminal to install the kendo-licensing package, refresh the license key, and activate it. This is the fastest way to set up your license.

```sh
npm install --save @progress/kendo-licensing
npx kendo-ui-license refresh && npx kendo-ui-license activate
```

--------------------------------

### Kendo CLI wizard summary output

Source: https://www.telerik.com/kendo-angular-ui/components/getting-started

Example output shown after the wizard completes. It lists next steps: cd into the project, npm install, and ng serve.

```sh
╭───────────────────────────────────────────────────────────────╮
│  ✓ Kendo UI for Angular app ready                             │
│                                                               │
│  Next steps:                                                  │
│    cd MyBlankAngularApp                                       │
│    npm install                                                │
│    ng serve                                                   │
│                                                               │
│  Theme       Default                                          │
│                                                               │
│  Docs  https://www.telerik.com/kendo-angular-ui/components    │
╰───────────────────────────────────────────────────────────────╯
```

--------------------------------

### Manual Setup - Import Specific Component Module (TextBoxModule)

Source: https://www.telerik.com/kendo-angular-ui/components/installation/using-modules

Example of importing only the specific component module (TextBoxModule) from a package with multiple components, like Inputs.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TextBoxModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, TextBoxModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}
```

--------------------------------

### Install and run migration via NPX

Source: https://www.telerik.com/kendo-angular-ui/components/assisted-migration

Installs the Kendo CLI and automatically runs the guided migration using NPX. This is an alternative to installing globally and running 'kendo migrate'.

```bash
npx @progress/kendo-cli migrate
```

--------------------------------

### Quick Start: Download and Activate License with Yarn

Source: https://www.telerik.com/kendo-angular-ui/components/licensing

Run these commands in your project terminal to install the kendo-licensing package, refresh the license key, and activate it using Yarn.

```sh
yarn add @progress/kendo-licensing
yarn run kendo-ui-license refresh && yarn run kendo-ui-license activate
```

--------------------------------

### start (get)

Source: https://www.telerik.com/kendo-angular-ui/components/drawing/api/lineargradient

Gets the start point of the gradient.

```APIDOC
## start (get)

### Description
Gets the start point of the gradient.

### Method
start

### Returns
Point - The current start point of the gradient.
```

--------------------------------

### Build and serve prerendered application

Source: https://www.telerik.com/kendo-angular-ui/components/framework/universal

Compiles the project, prerenders the application files, and starts an http demo server on http://localhost:8080.

```bash
npm run build:prerender && npm run serve:prerender
```

--------------------------------

### Launch the Kendo CLI interactive wizard

Source: https://www.telerik.com/kendo-angular-ui/components/getting-started

Run `kendo` with no arguments to start the interactive wizard. In the Quick Start section, select 'Create a new project' and follow the prompts.

```sh
kendo
```

--------------------------------

### Getting Started with CSV Export

Source: https://www.telerik.com/kendo-angular-ui/components/grid/export/csv-export

Basic setup for CSV export: import the KENDO_GRID_CSV_EXPORT utility array and nest the kendo-grid-csv component inside kendo-grid. Trigger export using the kendoGridCSVCommand directive, kendoGridCSVTool toolbar tool, or saveAsCSV method.

```html
<kendo-grid>
    <kendo-grid-csv></kendo-grid-csv>
</kendo-grid>
```

```ts
import { KENDO_GRID, KENDO_GRID_CSV_EXPORT } from '@progress/kendo-angular-grid';

@Component({
    ...
    imports: [KENDO_GRID, KENDO_GRID_CSV_EXPORT],
})
export class AppComponent { }
```

--------------------------------

### Run guided migration with kendo migrate

Source: https://www.telerik.com/kendo-angular-ui/components/assisted-migration

Runs the guided migration manually after installing the Kendo CLI globally. The command checks for available Kendo UI updates, prompts to install them, and applies codemods.

```bash
kendo migrate
```

--------------------------------

### Install and activate Kendo licensing

Source: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started

Installs the Kendo licensing package and refreshes/activates the license for manual MCP server setup.

```sh
npm i @progress/kendo-licensing
npx kendo-ui-license refresh && npx kendo-ui-license activate
```

--------------------------------

### Enter the project directory

Source: https://www.telerik.com/kendo-angular-ui/components/framework/universal

Changes the current directory to the node_sample_application folder.

```bash
cd node_sample_application
```

--------------------------------

### Run Kendo UI for Angular setup wizard

Source: https://www.telerik.com/kendo-angular-ui/components/installation/kendo-cli-angular-setup

Run the setup wizard for Kendo UI for Angular. The command walks you through license activation and MCP server configuration for your IDE.

```sh
kendo setup angular
```

--------------------------------

### SelectionRange TypeScript Example

Source: https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/selectionrange

Shows how to define a SelectionRange object with start and end dates. The start and end properties can be null when not fully selected.

```TypeScript
const range: SelectionRange = {
  start: new Date(2023, 0, 1),
  end: new Date(2023, 0, 31)
};
```

--------------------------------

### TypeScript example: Assigning a value to SelectionRangeEnd

Source: https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/selectionrangeend

Shows how to declare a variable of type SelectionRangeEnd and assign the value 'start'. This example is from the SelectionRangeEnd API reference page.

```TypeScript
const activeEnd: SelectionRangeEnd = 'start';
```

--------------------------------

### Install Smart Extensions and Microsoft.Extensions.AI packages

Source: https://www.telerik.com/kendo-angular-ui/components/grid/smart-grid/ai-service-setup

Use these dotnet CLI commands to add the Smart Extensions library and the Microsoft AI abstractions to your project.

```bash
dotnet add package Telerik.AI.SmartComponents.Extensions
dotnet add package Microsoft.Extensions.AI
```

--------------------------------

### Build the application

Source: https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core

Build the application to ensure that everything is working correctly.

```bash
dotnet build
```

--------------------------------

### Install Toolbars package with dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/toolbar/installation/manual-setup

Installs the Kendo UI for Angular Toolbars package along with its peer dependencies. Run this command first in the manual setup process.

```sh
npm install --save @progress/kendo-angular-toolbar @progress/kendo-angular-common @progress/kendo-angular-l10n @progress/kendo-angular-buttons @progress/kendo-angular-popup @progress/kendo-licensing @progress/kendo-angular-icons @progress/kendo-angular-indicators
```

--------------------------------

### firstDayOfMonth usage example

Source: https://www.telerik.com/kendo-angular-ui/components/date-math/api/firstdayofmonth

Call firstDayOfMonth with a Date object to get the first date of that month. The example returns 2016-01-01 for the input new Date(2016, 0, 15).

```ts
firstDayOfMonth(new Date(2016, 0, 15)); // 2016-01-01
```

--------------------------------

### Load dependencies for Create, Destroy, and Update functions

Source: https://www.telerik.com/kendo-angular-ui/components/cloud/azure-functions

Add these directives and using configurations to load the Product class and reference the required assemblies for the Create, Destroy, and Update functions.

```cs
#r "Newtonsoft.Json"
#r "Microsoft.WindowsAzure.Storage"
#load "..\Read\product.csx"

using System.Net;
using Microsoft.WindowsAzure.Storage.Table;
using Newtonsoft.Json;
```

--------------------------------

### start (set)

Source: https://www.telerik.com/kendo-angular-ui/components/drawing/api/lineargradient

Sets the start point of the gradient. Coordinates are relative to the shape bounding box. For example, [0, 0] is top left and [1, 1] is bottom right.

```APIDOC
## start (set)

### Description
Sets the start point of the gradient. The start point of the gradient. Coordinates are relative to the shape bounding box. For example, [0, 0] is top left and [1, 1] is bottom right.

### Method
start

### Parameters
- **startPoint** (number[]) - Required - The end point of the gradient.
```

--------------------------------

### Example Kendo CLI wizard session

Source: https://www.telerik.com/kendo-angular-ui/components/installation/kendo-cli-angular-setup

Shows an example session where a user creates a new Kendo UI for Angular app and configures their license and MCP server. The output includes the ASCII banner, menu prompts, and a success summary box with next steps.

```sh
$ kendo

  ██████╗ ██████╗  ██████╗  ██████╗ ██████╗ ███████╗███████╗███████╗
  ██╔══██╗██╔══██╗██╔═══██╗██╔════╝ ██╔══██╗██╔════╝██╔════╝██╔════╝
  ██████╔╝██████╔╝██║   ██║██║  ███╗██████╔╝█████╗  ███████╗███████╗
  ██╔═══╝ ██╔══██╗██║   ██║██║   ██║██╔══██╗██╔══╝  ╚════██║╚════██║
  ██║     ██║  ██║╚██████╔╝╚██████╔╝██║  ██║███████╗███████║███████║
  ╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚══════╝╚══════╝╚══════╝

  ? What would you like to do?
  Quick Start
  › Create a new project          kendo create
    Scaffold components           kendo scaffold
    ...

  ? Which product?
    KendoReact
  › Kendo UI for Angular
    ...

  ╭───────────────────────────────────────────────────────────────╮
  │  ✓ Kendo UI for Angular app ready                             │
  │                                                               │
  │  Next steps:                                                  │
  │    cd MyBlankAngularApp                                       │
  │    npm install                                                │
  │    ng serve                                                   │
  │                                                               │
  │  Theme       Default                                          │
  │                                                               │
  │  Docs  https://www.telerik.com/kendo-angular-ui/components    │
  ╰───────────────────────────────────────────────────────────────╯

  ? What would you like to do next?
  ❯ Back to main menu
    Exit
```

--------------------------------

### durationInYears Syntax Example

Source: https://www.telerik.com/kendo-angular-ui/components/date-math/api/durationinyears

Shows the syntax of the durationInYears function with three example calls. The function returns the number of years between the start and end dates, as shown by the comments: 12, 6, and 0.

```ts
durationInYears(new Date(2016, 0, 1), new Date(2028, 0, 1)); // 12
durationInYears(new Date(2016, 0, 1), new Date(2022, 0, 1)); // 6
durationInYears(new Date(2016, 0, 1), new Date(2016, 0, 1)); // 0
```

--------------------------------

### DateRangeComponent usage with kendo-daterange selector

Source: https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/daterangecomponent

Example of using the kendo-daterange component with kendo-dateinput elements for start and end dates. The dateRange object holds the start and end values, initially set to null.

```TypeScript
@Component({
selector: 'my-app',
template: `
 <kendo-daterange>
     <kendo-dateinput kendoDateRangeStartInput [(value)]="dateRange.start"></kendo-dateinput>
     <kendo-dateinput kendoDateRangeEndInput [(value)]="dateRange.end"></kendo-dateinput>
 </kendo-daterange>
`
})
export class AppComponent {
  public dateRange: any = { start: null, end: null };
}
```

--------------------------------

### Install Tooltips package and dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/tooltips/installation/manual-setup

Run this npm command to install the @progress/kendo-angular-tooltip package along with its required peer dependencies: @progress/kendo-angular-l10n, @progress/kendo-angular-popup, @progress/kendo-angular-common, @progress/kendo-licensing, and @progress/kendo-angular-icons.

```sh
npm install --save @progress/kendo-angular-tooltip @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-common @progress/kendo-licensing @progress/kendo-angular-icons
```

--------------------------------

### Agentic UI Generator prompt example

Source: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started

Start a prompt with the `#kendo_ui_generator` handle in the AI chat interface to invoke the Agentic UI Generator orchestrator. The example asks for a dashboard page with a grid and a chart.

```prompt
#kendo_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
```

--------------------------------

### addMonths syntax and example

Source: https://www.telerik.com/kendo-angular-ui/components/date-math/api/addmonths

Shows the function signature and usage. The example adds 5 months to June 1, 2016, resulting in November 1, 2016, and subtracts 5 months to get January 1, 2015.

```ts
addMonths(new Date(2016, 5, 1), 5); // 2016-11-1
addMonths(new Date(2016, 5, 1), -5); // 2015-1-1
```

--------------------------------

### Install Inputs package and dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/inputs/installation/manual-setup

Run this npm command to install the Inputs package along with its required peer dependencies.

```sh
npm install --save @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-angular-popup @progress/kendo-angular-dialog @progress/kendo-angular-buttons @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-angular-icons
```

--------------------------------

### Clone the sample repository

Source: https://www.telerik.com/kendo-angular-ui/components/framework/universal

Clones the kendo-angular-universal-demo repository from GitHub.

```bash
git clone https://github.com/telerik/kendo-angular-universal-demo.git
```

--------------------------------

### firstDayInWeek usage example

Source: https://www.telerik.com/kendo-angular-ui/components/date-math/api/firstdayinweek

Shows how to call firstDayInWeek with a Date object. The first call uses the default week start (Day.Sunday) and returns 2016-01-10. The second call specifies Day.Monday as the week start and returns 2016-01-11.

```ts
firstDayInWeek(new Date(2016, 0, 15)); // 2016-01-10
firstDayInWeek(new Date(2016, 0, 15), Day.Monday); // 2016-01-11
```

--------------------------------

### Import Hammer.js in the application module

Source: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/chart-hammerjs-error

For modular projects, import Hammer.js in the application module. This example shows the import and the NgModule setup.

```TS
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ChartModule } from '@progress/kendo-angular-charts';
import 'hammerjs';

@NgModule({
    bootstrap: [AppComponent],
    imports:   [
        BrowserModule, BrowserAnimationsModule, ChartModule
    ]
})
export class AppModule { }
```

--------------------------------

### Install kendo-angular-plugin in GitHub Copilot CLI

Source: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started

Adds the marketplace and installs the kendo-angular-plugin in GitHub Copilot CLI.

```SH
copilot plugin marketplace add telerik/ai-plugins
copilot plugin install kendo-angular-plugin@telerik-ai-plugins
```

--------------------------------

### Install Navigation package and dependencies

Source: https://www.telerik.com/kendo-angular-ui/components/navigation/installation/manual-setup

Run this npm command to install the Navigation package along with its required peer dependencies.

```sh
npm install --save @progress/kendo-angular-navigation @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-licensing @progress/kendo-angular-icons @progress/kendo-angular-buttons
```
Tokens:
Raw