### Invoke Getting Started Assistant

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

Use the Getting Started Assistant in your IDE's AI chat to create a new Angular project.

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

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

### Install Dependencies and Serve Project (VS Code Extension)

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

After scaffolding a project using the VS Code extension, run these commands to install dependencies and start the development server with automatic browser opening.

```sh
npm i && ng serve -o
```

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

### Run Kendo CLI Migration with NPX

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

Install and automatically run the guided Kendo CLI migration using NPX. This is a convenient way to start the migration without a global installation.

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

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

### Basic Gantt Component Setup

Source: https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent

Demonstrates the basic setup of the Kendo UI Gantt component, including data binding, hierarchy configuration, and defining columns and timeline views. Use this as a starting point for creating Gantt charts.

```typescript
import { Component } from '@angular/core';
import { GanttComponent, DependencyType } from '@progress/kendo-angular-gantt';

@Component({
  selector: 'my-app',
  template: `
    <kendo-gantt
      [style.height.px]="500"
      [kendoGanttHierarchyBinding]="data"
      childrenField="subtasks"
      [dependencies]="dependencies">
      <kendo-gantt-column field="title" title="Task" [width]="200" [expandable]="true"></kendo-gantt-column>
      <kendo-gantt-column field="start" title="Start" format="dd-MMM-yyyy" [width]="120"></kendo-gantt-column>
      <kendo-gantt-column field="end" title="End" format="dd-MMM-yyyy" [width]="120"></kendo-gantt-column>
      <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
      <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
      <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
    </kendo-gantt>
  `
})
export class AppComponent {
  public data: Task[] = [
    {
      id: 1,
      title: 'Planning',
      start: new Date('2024-01-01'),
      end: new Date('2024-01-05'),
      subtasks: []
    }
  ];
  public dependencies = [
    { id: 1, fromId: 1, toId: 2, type: DependencyType.FS }
  ];
}
```

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

### Run Kendo UI for Angular Setup Wizard

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

Execute the Kendo CLI command to initiate the setup wizard for Kendo UI for Angular. This wizard guides you through license activation and MCP server configuration.

```sh
kendo setup angular
```

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

### Kendo CLI Project Summary

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

This is an example of the summary output after a Kendo UI for Angular project is successfully scaffolded. It provides next steps for installation and serving the application.

```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    │
╰───────────────────────────────────────────────────────────────╯
```

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

### Grid Configuration for Legacy Virtualization

Source: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-legacy-virtualization

Example setup for legacy virtualization in Kendo UI for Angular Grid. Requires 'data', 'height', 'scrollable', 'rowHeight', 'skip', and 'pageSize' properties.

```html
<kendo-grid
  [data]="gridData"
  [height]="400"
  scrollable="virtual"
  [rowHeight]="36"
  [skip]="skip"
  [pageSize]="pageSize"
  (pageChange)="onPageChange($event)">
  <!-- ...columns... -->
</kendo-grid>
```

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

### Basic Cascading ComboBox Setup

Source: https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/cascading

This example demonstrates the fundamental structure for creating cascading ComboBoxes. Ensure you have the necessary Kendo UI for Angular modules imported.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Product } from './product';
import { Category } from './category';
import { products, categories } from './data';

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <form [formGroup]="form">
        <p>
          Select a category:
          <kendo-combobox
            formControlName="categoryCtrl"
            [data]="categories"
            textField="name"
            valueField="id"
            (valueChange)="onCategoryChange($event)"
          >
          </kendo-combobox>
        </p>

        <p>
          Select a product:
          <kendo-combobox
            formControlName="productCtrl"
            [data]="filteredProducts"
            textField="name"
            valueField="id"
            [disabled]="!form.get('categoryCtrl').value"
          >
          </kendo-combobox>
        </p>
      </form>
    </div>
  `
})
export class AppComponent implements OnInit {
  public form: FormGroup;
  public categories: Category[] = categories;
  public products: Product[] = products;
  public filteredProducts: Product[] = [];

  public ngOnInit(): void {
    this.form = new FormGroup({
      categoryCtrl: new FormControl(null, Validators.required),
      productCtrl: new FormControl(null, Validators.required)
    });
  }

  public onCategoryChange(value: number | null): void {
    this.filteredProducts = this.products.filter(p => p.categoryId === value);
    this.form.get('productCtrl').reset();
  }
}

export class Product {
  constructor(public id: number, public name: string, public categoryId: number) {}
}

export class Category {
  constructor(public id: number, public name: string) {}
}

const categories: Category[] = [
  new Category(1, 'Furniture'),
  new Category(2, 'Decor'),
  new Category(3, 'Kitchenware')
];

const products: Product[] = [
  new Product(1, 'Table', 1),
  new Product(2, 'Chair', 1),
  new Product(3, 'Lamp', 2),
  new Product(4, 'Vase', 2),
  new Product(5, 'Plate', 3),
  new Product(6, 'Bowl', 3)
];

```

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

### Custom Speech Recognition Integration Example

Source: https://www.telerik.com/kendo-angular-ui/components/buttons/speechtotextbutton/integration

Template for implementing custom speech recognition logic. Use the `start` and `end` events to manage audio capture and interaction with your chosen speech-to-text provider. This example includes placeholders for API keys and regions, and comments guiding the integration process.

```typescript
@Component({
  // ...existing metadata...
  template: `
    <button kendoSpeechToTextButton
      integrationMode="none"
      (start)="onStart()"
      (end)="onEnd()"
    >{{ isListening ? 'Listening...' : 'Click to speak' }}</button>
    <kendo-textarea [readonly]="true" [value]="textAreaValue"></kendo-textarea>
  `
})
export class AppComponent {
  public textAreaValue = '';
  public isListening = false;
  // Example: Add your API key and region here for your provider
  private azureSubscriptionKey = '<YOUR_AZURE_SPEECH_KEY>'; // Get this from Azure Portal > Your Speech resource > Keys and Endpoint
  private azureRegion = '<REGION_IDENTIFIER>'; // Example: 'westeurope', 'eastus'
  // Add any other required properties for your integration here

  public onStart(): void {
    this.isListening = true;
    // Start recording audio here
    // If your provider supports live/streaming results, you can send audio chunks and update textAreaValue as results arrive.
    // For batch providers, just record audio and wait for final result in onEnd.
  }

  public onEnd(): void {
    this.isListening = false;
    // Stop recording and send audio to your speech-to-text provider here
    // Example:
    // 1. Prepare audio data (e.g., as a Blob)
    // 2. Send to your provider's API endpoint
    // 3. Handle the response and update textAreaValue with the recognized text
    //
    // See provider documentation for details:
    // - Azure: https://learn.microsoft.com/en-us/azure/ai-services/speech-service/rest-speech-to-text-short
    // - Google: https://cloud.google.com/speech-to-text/docs/reference/rest
    // - AWS: https://docs.aws.amazon.com/transcribe/latest/dg/API_Reference.html
    //
    // Example (simulated result):
    this.textAreaValue = 'Hello from external speech recognition!';
  }
}

```

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

### Basic Grid Setup

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

Initial setup of a Kendo Grid with basic columns for displaying data.

```html
<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column field="CustomerName" title="Customer Name"></kendo-grid-column>
    <kendo-grid-column field="TotalBalance" title="Total Balance" format="{0:c}"></kendo-grid-column>
</kendo-grid>
```

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

### Create Product Controller in C#

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

Implement an ASP.NET Core controller to serve product data. This example uses static data.

```csharp
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;
        }
    }
}
```

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

### start Method (Get)

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

Retrieves the current start point of the linear gradient.

```APIDOC
## start Method (Get)

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

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

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

### Basic AIPrompt Component Setup

Source: https://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/configuration

Demonstrates the basic structure of nesting prompt and output views within the AIPrompt component. This sets up the fundamental UI for AI interaction.

```html
<kendo-aiprompt>
    <kendo-aiprompt-prompt-view buttonText="Prompt View">
    </kendo-aiprompt-prompt-view>

    <kendo-aiprompt-output-view>
    </kendo-aiprompt-output-view>
</kendo-aiprompt>
```

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

### Get the Start Point of the Gradient

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

Retrieves the current start point coordinates of the linear gradient.

```typescript
start(): Point
```

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

### MultiColumnComboBox All Events Example

Source: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/events

This example demonstrates all available events for the MultiColumnComboBox component. No specific setup is required beyond standard component initialization.

```typescript
import { Component, ViewChild } from "@angular/core";
import { MultiColumnComboBoxComponent, DropDownFilterSettings, MultiColumnComboBoxEvent } from "@progress/kendo-angular-dropdowns";

@Component({
  selector: "my-app",
  template: ""
})
export class AppComponent {
  @ViewChild("multicolumn", {
    static: false
  })
  publicmulticolumn: MultiColumnComboBoxComponent;

  public data: any[] = [
    { text: "Item 1", value: 1 },
    { text: "Item 2", value: 2 },
    { text: "Item 3", value: 3 }
  ];

  public onOpen(e: MultiColumnComboBoxEvent):
    void {
    console.log("OPEN EVENT", e);
  }

  public onClose(e: MultiColumnComboBoxEvent):
    void {
    console.log("CLOSE EVENT", e);
  }

  public onFilterChange(e: MultiColumnComboBoxEvent):
    void {
    console.log("FILTER CHANGE EVENT", e);
  }

  public onValueChange(e: MultiColumnComboBoxEvent):
    void {
    console.log("VALUE CHANGE EVENT", e);
  }

  public onSelectionChange(e: MultiColumnComboBoxEvent):
    void {
    console.log("SELECTION CHANGE EVENT", e);
  }

  public onActionComplete(e: MultiColumnComboBoxEvent):
    void {
    console.log("ACTION COMPLETE EVENT", e);
  }

  public onDataBound(e: MultiColumnComboBoxEvent):
    void {
    console.log("DATA BOUND EVENT", e);
  }

  public onNavigate(e: MultiColumnComboBoxEvent):
    void {
    console.log("NAVIGATE EVENT", e);
  }

  public onTab(e: MultiColumnComboBoxEvent):
    void {
    console.log("TAB EVENT", e);
  }

  public onFocus(e: MultiColumnComboBoxEvent):
    void {
    console.log("FOCUS EVENT", e);
  }

  public onBlur(e: MultiColumnComboBoxEvent):
    void {
    console.log("BLUR EVENT", e);
  }
}

```

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

### Get First Day of Week (Custom Start Day)

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

Calculates the first day of the week for a given date, specifying Monday as the start of the week.

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

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

### Basic DrawerContainerComponent Setup

Source: https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercontainercomponent

Demonstrates the basic structure for integrating the Drawer and its content within a DrawerContainer. Ensure the Drawer component is configured with its items.

```html
<kendo-drawer-container>
  <kendo-drawer [items]="items"></kendo-drawer>
  <kendo-drawer-content>
    <h1>Main Content</h1>
  </kendo-drawer-content>
</kendo-drawer-container>
```

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

### Basic BottomNavigation Setup

Source: https://www.telerik.com/kendo-angular-ui/components/navigation/api/bottomnavigationcomponent

Demonstrates the basic setup of the BottomNavigation component with a collection of items, each having text and an icon. This is useful for creating primary navigation in an application.

```typescript
@Component({
     selector: 'my-app',
     template: `
         <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
     `
})
class AppComponent {
     public items: Array<any> = [
         { text: 'Inbox', icon: 'envelop', selected: true },
         { text: 'Calendar', icon: 'calendar'},
         { text: 'Profile', icon: 'user'}
     ];
}
```

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

### FileSelect Events Example

Source: https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/events

Demonstrates all available events for the Kendo UI for Angular FileSelect component. No specific setup or imports are shown, as this is a conceptual example.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<kendo-fileselect (filesSelected)="onFilesSelected($event)" (select)="onSelect($event)" (remove)="onRemove($event)" (error)="onError($event)" (clear)="onClear($event)"></kendo-fileselect>'
})
export class AppComponent {
  public onFilesSelected(e: any) {
    // Handle filesSelected event
    console.log('Files selected:', e.files);
  }

  public onSelect(e: any) {
    // Handle select event
    console.log('File selected:', e.files[0]);
  }

  public onRemove(e: any) {
    // Handle remove event
    console.log('File removed:', e.files[0]);
  }

  public onError(e: any) {
    // Handle error event
    console.error('Error uploading file:', e.files[0], e.error);
  }

  public onClear(e: any) {
    // Handle clear event
    console.log('FileSelect cleared');
  }
}
```

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

### Basic Drag Target Example

Source: https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/dragtarget

This example demonstrates how to apply the DragTarget directive to an element to make it draggable. It shows the basic setup for enabling drag and drop functionality.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div
      kendoDragTarget
      (onDragStart)="onDragStart($event)"
      (onDrag)="onDrag($event)"
      (onDragEnd)="onDragEnd($event)"
      style="width: 100px; height: 100px; background-color: blue;"
    >
      Drag Me
    </div>
  `
})
export class AppComponent {
  onDragStart(event) {
    console.log('Drag Start:', event);
  }

  onDrag(event) {
    console.log('Dragging:', event);
  }

  onDragEnd(event) {
    console.log('Drag End:', event);
  }
}

```

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

### Display Help for Migration Command

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

Prints the help information for the 'kendo migrate' command, outlining all available options and their usage.

```bash
kendo migrate --help
```

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

### All Editor Events Example

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

This example demonstrates all the events that the Kendo UI for Angular Editor component features. No specific setup is required beyond including the Editor component.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<kendo-editor (change)="onChange($event)" (focus)="onFocus()" (blur)="onBlur()" (execute)="onExecute($event)" (paste)="onPaste($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)"></kendo-editor>'
})
export class AppComponent {
  public onChange(e: any) {
    console.log('Change');
  }

  public onFocus(): void {
    console.log('Focus');
  }

  public onBlur(): void {
    console.log('Blur');
  }

  public onExecute(e: any): void {
    console.log('Execute');
  }

  public onPaste(e: any): void {
    console.log('Paste');
  }

  public onKeydown(e: any): void {
    console.log('Keydown');
  }

  public onKeyup(e: any): void {
    console.log('Keyup');
  }
}
```

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

### Kendo CLI Interactive Wizard Example Session

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

An example session demonstrating the interactive wizard's prompts for creating a new Kendo UI for Angular project, including product selection and 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
```

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

### Manual Installation of Multiple Packages

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

Install the Grid package along with other Kendo UI packages and their dependencies using npm.

```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
```

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

### Install Smart Components Extensions and AI Packages

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

Installs the necessary Telerik AI Smart Components Extensions and Microsoft AI abstractions. Also installs the Azure OpenAI provider package.

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

```bash
dotnet add package Azure.AI.OpenAI
```

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

### IconSettings Configuration Example

Source: https://www.telerik.com/kendo-angular-ui/components/icons/api/iconsettings

Demonstrates how to define IconSettings to customize an icon's type, theme color, size, and flip direction.

```typescript
const settings: IconSettings = {
  type: 'svg',
  themeColor: 'primary',
  size: 'large',
  flip: 'horizontal'
};
```

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

### Basic Editing Dialog Setup with Reactive Forms

Source: https://www.telerik.com/kendo-angular-ui/components/gantt/editing/editing-dialog

Demonstrates the setup and usage of the Kendo UI Gantt for Angular's edit dialog with Reactive Forms. This example shows how to bind task data and handle edit operations.

```typescript
import { Component, ViewChild } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { GanttComponent, GanttDependency, GanttTask } from "@progress/kendo-angular-gantt";
import { process } from "@progress/kendo-data-query";

@Component({
  selector: "my-app",
  template: `
    <kendo-gantt
      #gantt
      [style.height.vh]="100"
      [data]="data"
      [dependencies]="dependencies"
      (taskClick)="onTaskClick($event)"
      (save)="onSave($event)"
      (cancel)="onCancel($event)"
      (taskDelete)="onTaskDelete($event)"
      (remove)="onRemove($event)"
    >
      <kendo-gantt-timeline-week-view>
        <kendo-gantt-column
          field="title"
          title="Title"
          [width]="200"
        ></kendo-gantt-column>
      </kendo-gantt-timeline-week-view>
      <kendo-gantt-toolbar>
        <kendo-gantt-toolbar-button icon="save"
          (click)="saveChanges()"
          [disabled]="!gantt.hasChanges()"
        >Save Changes</kendo-gantt-toolbar-button>
        <kendo-gantt-toolbar-button icon="cancel"
          (click)="cancelChanges()"
          [disabled]="!gantt.hasChanges()"
        >Cancel Changes</kendo-gantt-toolbar-button>
      </kendo-gantt-toolbar>
    </kendo-gantt>
  `,
})
export class AppComponent {
  @ViewChild("gantt") public gantt: GanttComponent;

  public data: GanttTask[] = [
    {
      id: 1,
      title: "Task 1",
      start: new Date("2023-10-01"),
      end: new Date("2023-10-05"),
      percentComplete: 0.5,
    },
    {
      id: 2,
      title: "Task 2",
      start: new Date("2023-10-03"),
      end: new Date("2023-10-07"),
      percentComplete: 0.7,
      parentId: 1,
    },
  ];

  public dependencies: GanttDependency[] = [
    { id: 1, fromId: 1, toId: 2, type: "FinishToStart" },
  ];

  public onTaskClick(event: any):
    void {
    this.gantt.editTask(event.dataItem, new FormGroup({}));
  }

  public onSave(event: any):
    void {
    console.log("Save event:", event);
  }

  public onCancel(event: any):
    void {
    console.log("Cancel event:", event);
  }

  public onTaskDelete(event: any):
    void {
    console.log("Task delete event:", event);
  }

  public onRemove(event: any):
    void {
    console.log("Remove event:", event);
  }

  public saveChanges(): void {
    this.gantt.saveChanges();
  }

  public cancelChanges(): void {
    this.gantt.cancelChanges();
  }
}

```

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

### Sample Export Prompts for Smart Grid

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

Examples of natural language prompts for exporting Grid data to various formats like Excel and PDF.

```text
"Export to Excel with file name 'employee_data'"
```

```text
"Export to PDF"
```

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

### Basic DateRangeComponent Usage

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

Demonstrates the basic setup of the Kendo UI DateRangeComponent with two DateInput components for start and end dates.

```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 };
}
```

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

### Enable TreeView Checkboxes

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

Apply the kendoTreeViewCheckable directive to enable the checkbox feature. This example shows basic setup for multiple selection.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<kendo-treeview [kendoTreeViewCheckable]="true"></kendo-treeview>'
})
export class AppComponent {
}
```

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

### Sample Highlighting and Selection Prompts for Smart Grid

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

Examples of natural language prompts for highlighting rows or cells based on conditions and managing selections within the Smart Grid.

```text
"Highlight rows where status is Active"
```

```text
"Select age cells where age is greater than 30"
```

```text
"Clear selection"
```

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

### Import ScrollViewModule

Source: https://www.telerik.com/kendo-angular-ui/components/scrollview/api/scrollviewmodule

Import the ScrollViewModule into your Angular application's NgModule to use the ScrollView component. This example demonstrates a typical setup.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { AppComponent } from './app.component';

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

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

### Basic Grid Initialization

Source: https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent

Demonstrates the basic setup for initializing the Kendo UI for Angular Grid component with data binding.

```html
<kendo-grid [data]="gridData"></kendo-grid>
```

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

### Basic HintComponent Usage

Source: https://www.telerik.com/kendo-angular-ui/components/inputs/api/hintcomponent

Demonstrates the basic implementation of the HintComponent to display a hint message.

```html
<kendo-formhint>Hint message here</kendo-formhint>
```

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

### Install Kendo UI PivotGrid Package

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

Use the Angular CLI's ng add command to install the PivotGrid package and its dependencies. This command automates the setup process, including adding the package, peer dependencies, and registering the default theme.

```sh
ng add @progress/kendo-angular-pivotgrid
```

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

### Get First Day of Week (Default Sunday)

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

Calculates the first day of the week for a given date, defaulting to Sunday as the start of the week.

```typescript
firstDayInWeek(new Date(2016, 0, 15)); // 2016-01-10
```

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

### Sample Column Operation Prompts for Smart Grid

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

Examples of natural language prompts for manipulating Grid columns, including hiding, locking, resizing, and reordering.

```text
"Hide the Age column"
```

```text
"Lock the Name column"
```

```text
"Resize the Name column to 200px"
```

```text
"Move the Department column to position 1"
```

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

### Get a Range Object

Source: https://www.telerik.com/kendo-angular-ui/components/spreadsheet/cell-sheet-operations

Retrieve a Range object from the active sheet using a cell address or range. This is the starting point for most cell manipulation tasks.

```typescript
const widget = this.spreadsheetRef.spreadsheetWidget;
const sheet  = widget.activeSheet() as any;
const range  = sheet.range('B2:D5'); // Range
```

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

### Reactive Forms with Upload

Source: https://www.telerik.com/kendo-angular-ui/components/uploads/upload/forms

Integrate the Upload component into a reactive form using FormGroup. This example demonstrates basic setup for reactive form integration.

```typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-forms',
  template: '<form [formGroup]="form"><kendo-upload formControlName="files"></kendo-upload></form>'
})
export class ReactiveFormsComponent {
  public form: FormGroup = new FormGroup({
    files: new FormControl()
  });
}
```

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

### Run Quick Migration (Force)

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

Performs a migration without any prompts, applying all available updates and codemods. Use with caution.

```bash
kendo migrate --force
```

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

### Importing RadioButtonModule

Source: https://www.telerik.com/kendo-angular-ui/components/inputs/api/radiobuttonmodule

Import the RadioButtonModule into your application's NgModule to use the RadioButton component and directive. This example shows a typical setup for an Angular application.

```typescript
import { RadioButtonModule } from '@progress/kendo-angular-inputs';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

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

### Install Dependencies for Performance Testing

Source: https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance

Install the necessary npm packages for the sample performance testing application.

```bash
npm install
```

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

### Setting Drag Delay

Source: https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/delay

This example demonstrates how to set a drag delay of 500 milliseconds for the DragTarget component. The `onDragReady` event will fire after this delay, before the drag starts.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dragtarget
      [dragDelay]="500"
      (onDragReady)="onDragReady($event)"
      (onDragStart)="onDragStart($event)"
    >
      Drag Me
    </kendo-dragtarget>
  `
})
export class AppComponent {
  onDragReady(args) {
    console.log('Drag Ready!');
  }

  onDragStart(args) {
    console.log('Drag Started!');
  }
}
```

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

### Install Kendo UI Tooltips Package

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

Installs the Kendo UI Tooltips package along with its necessary dependencies and licensing components.

```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
```

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

### NgModule-based Application Popup Container Configuration

Source: https://www.telerik.com/kendo-angular-ui/components/popup/api/popup_container

Configure POPUP_CONTAINER within an NgModule to specify the injection target for the PopupService. This example demonstrates setup for NgModule-based applications.

```typescript
import { PopupModule, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ElementRef, NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports:      [BrowserModule, PopupModule],
    bootstrap:    [AppComponent],
    providers: [{
      provide: POPUP_CONTAINER,
      useFactory: () => {
         //return the container ElementRef, where the popup will be injected
         return { nativeElement: document.body } as ElementRef;
      }
    }]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);
```

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

### Demonstrate All Available Layout Algorithms

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

This example showcases all supported layout algorithms for the Kendo UI for Angular Diagram component in action. It's useful for visualizing the different arrangement possibilities.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-diagram
      [style.height.px]="600"
      [layout]="layout"
      [nodes]="nodes"
      [connections]="connections"
    ></kendo-diagram>
  `
})
export class AppComponent {
  public layout: any = {
    type: 'tree',
    subType: 'down'
  };

  public nodes: any[] = [
    { id: 1, x: 100, y: 100 },
    { id: 2, x: 150, y: 200 },
    { id: 3, x: 50, y: 200 },
    { id: 4, x: 200, y: 300 },
    { id: 5, x: 100, y: 300 },
    { id: 6, x: 50, y: 300 }
  ];

  public connections: any[] = [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 2, to: 4 },
    { from: 2, to: 5 },
    { from: 3, to: 6 }
  ];
}
```

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

### Run Kendo CLI Migration Manually

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

Execute the Kendo CLI migration process manually after global installation. This command initiates the guided migration flow.

```bash
kendo migrate
```

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

### Switch Appearance Options

Source: https://www.telerik.com/kendo-angular-ui/components/inputs/switch/appearance

Demonstrates all available appearance options of the Switch component in action. This example showcases the default behavior and customization possibilities.

```html
<kendo-switch></kendo-switch>
<kendo-switch size="small"></kendo-switch>
<kendo-switch size="medium"></kendo-switch>
<kendo-switch size="large"></kendo-switch>

<kendo-switch trackRounded="small"></kendo-switch>
<kendo-switch trackRounded="medium"></kendo-switch>
<kendo-switch trackRounded="large"></kendo-switch>
<kendo-switch trackRounded="full"></kendo-switch>
<kendo-switch trackRounded="none"></kendo-switch>

<kendo-switch thumbRounded="small"></kendo-switch>
<kendo-switch thumbRounded="medium"></kendo-switch>
<kendo-switch thumbRounded="large"></kendo-switch>
<kendo-switch thumbRounded="full"></kendo-switch>
<kendo-switch thumbRounded="none"></kendo-switch>
```

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

### Basic DateRangeEndInput Usage

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

Demonstrates how to use the DateRangeEndInputDirective with a Kendo UI DateInput component within a DateRange component. This setup allows for selecting both start and end dates.

```typescript
@Component({
  selector: 'my-app',
  template: '
    <kendo-daterange>
      <kendo-dateinput kendoDateRangeStartInput [(value)]="startDate"></kendo-dateinput>
      <kendo-dateinput kendoDateRangeEndInput [(value)]="endDate"></kendo-dateinput>
    </kendo-daterange>
  '
})
export class AppComponent {
  public startDate: Date = new Date();
  public endDate: Date = new Date();
}
```

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

### TreeList with Row Selection Enabled

Source: https://www.telerik.com/kendo-angular-ui/components/treelist/selection/row-selection

Demonstrates the basic setup for row selection in the Kendo UI for Angular TreeList. This example enables multiple row selection by default.

```typescript
import { Component } from '@angular/core';
import { SelectionEvent } from '@progress/kendo-angular-treegrid';

@Component({
  selector: 'my-app',
  template: `
    <kendo-treelist
      [data]="data"
      [height]="400"
      (selectionChange)="onSelectionChange($event)"
      kendoTreeListSelectable
      [selectable]="{
        enabled: true,
        mode: 'multiple',
        drag: true
      }"
    >
      <kendo-treelist-column [field]="'id'" [width]="100"> </kendo-treelist-column>
      <kendo-treelist-column [field]="'name'" [width]="200"> </kendo-treelist-column>
      <kendo-treelist-column [field]="'type'" [width]="150"> </kendo-treelist-column>
    </kendo-treelist>
  `
})
export class AppComponent {
  public data: any[] = [
    {
      id: 1,
      name: 'foo',
      type: 'bar',
      hasChildren: true,
      expanded: true,
      children: [
        { id: 11, name: 'foo.bar', type: 'baz' },
        { id: 12, name: 'foo.baz', type: 'bar', hasChildren: true, children: [
            { id: 121, name: 'foo.baz.bar', type: 'foo' },
            { id: 122, name: 'foo.baz.foo', type: 'bar' }
        ] }
      ]
    },
    {
      id: 2,
      name: 'baz',
      type: 'bar'
    }
  ];

  public onSelectionChange(e: SelectionEvent) {
    console.log('Selection Change:', e.newSelection);
  }
}

```

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

### Sample Data Operation Prompts for Smart Grid

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

Examples of natural language prompts for performing data operations like filtering, sorting, grouping, and pagination in the Smart Grid.

```text
"Show products with price over 100"
```

```text
"Sort by amount descending"
```

```text
"Group by account type"
```

```text
"Go to page 20"
```

```text
"Clear filtering"
```

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

### Install Kendo UI Licensing Package (Yarn)

Source: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/license-per-project-setup

Install the `@progress/kendo-licensing` package as a project dependency using yarn.

```yarn
yarn add @progress/kendo-licensing
```

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

### Navigator Hint Format Example

Source: https://www.telerik.com/kendo-angular-ui/components/charts/api/navigatorhintcomponent

Specifies the format of the hint using date formatting for start and end values. This is useful for displaying date ranges in a specific locale.

```html
<kendo-chart>
    <kendo-chart-navigator>
        <kendo-chart-navigator-hint [hint]="{format:'{0:dd.MM.yyyy} {1:yyyy.dd.MM}'}"></kendo-chart-navigator-hint>
    </kendo-chart-navigator>
    <kendo-chart-series>
        <kendo-chart-series-item type="line" [data]="[1, 2, 3, 4, 5]">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>
```

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

### Form Gutters Configuration Example

Source: https://www.telerik.com/kendo-angular-ui/components/inputs/form/layout

Demonstrates setting gutter sizes between form fields using the `gutters` property on the Form component. Gutters can be fixed pixel values.

```html
<form kendoForm [formGroup]="formGroup" gutters="20px">
    <kendo-formfield label="Full name">
        <input kendoTextBox formControlName="fullName" />
    </kendo-formfield>

    <kendo-formfield label="Email">
        <input kendoTextBox formControlName="email" />
    </kendo-formfield>

    <div class="k-form-buttons">
        <button type="submit" kendoButton primary>Submit</button>
    </div>
</form>
```

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

### Handle Drag Start with Manual Mode

Source: https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/manual-drag

Set the `mode` property to `manual` and handle the `onDragStart` event to get the current DragTarget HTML element and update its position to `fixed`.

```typescript
    public handleDragStart(ev: DragTargetDragStartEvent): void {
        this.dragIndex = ev.dragTargetId;
        this.dragTarget = ev.dragTarget;
        this.renderer.setStyle(this.dragTarget, 'position',  'fixed');
    }
```

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

### Build and Run Kendo UI for Angular Project

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

After generating the project, install dependencies, build the application, and run the development server.

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

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

### Basic MultiSelectTree with Filtering and Expandable Directive

Source: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/filtering

This snippet shows the basic setup for a MultiSelectTree with filtering enabled and the expandable directive applied. Use this as a starting point for configuring auto-expansion.

```html
<kendo-multiselecttree
    [kendoMultiSelectTreeHierarchyBinding]="data"
    [filterable]="true"
    kendoMultiSelectTreeExpandable
    ...
>
</kendo-multiselecttree>
```

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

### Install Kendo UI Data Query Package

Source: https://www.telerik.com/kendo-angular-ui/components/data-query/get-started

Use npm to install the @progress/kendo-data-query package. This is the first step to enable in-memory data operations.

```sh
npm install --save @progress/kendo-data-query
```