Kendo Angular Snippets

⚠️ Disclaimer ⚠️

This extension is NOT an official product from Progress/Telerik. It is a community-developed tool intended to assist developers working with Kendo UI for Angular components.

A Visual Studio Code extension that provides code snippets for Kendo UI for Angular components. This extension helps developers quickly implement Kendo UI components in their Angular applications.

Features

This extension provides snippets for the following Kendo UI for Angular components:

Form Controls

TextBox

• kendo-textbox-import - Import Kendo TextBox module
• kendo-textbox - Basic TextBox implementation
• kendo-textbox-validation - TextBox with validation

DropDownList

• kendo-dropdown-import - Import Kendo DropDownList module
• kendo-dropdown - Basic DropDownList implementation
• kendo-dropdown-filter - DropDownList with filtering

AutoComplete

• kendo-autocomplete-import - Import Kendo AutoComplete module
• kendo-autocomplete - Basic AutoComplete implementation
• kendo-autocomplete-filter - AutoComplete with filtering

DatePicker

• kendo-datepicker-import - Import Kendo DatePicker module
• kendo-datepicker - Basic DatePicker implementation
• kendo-datepicker-range - DatePicker with date range

DateInput

• kendo-dateinput-import - Import Kendo DateInput module
• kendo-dateinput - Basic DateInput implementation

TimePicker

• kendo-timepicker-import - Import Kendo TimePicker module
• kendo-timepicker - Basic TimePicker implementation

Checkbox

• kendo-checkbox-import - Import Kendo Checkbox module
• kendo-checkbox - Basic Checkbox implementation

Radio Buttons

• kendo-radio-import - Import Kendo Radio Buttons module
• kendo-radio - Basic Radio Buttons implementation

Switch

• kendo-switch-import - Import Kendo Switch module
• kendo-switch - Basic Switch implementation

Rating

• kendo-rating-import - Import Kendo Rating module
• kendo-rating - Basic Rating implementation

Slider

• kendo-slider-import - Import Kendo Slider module
• kendo-slider - Basic Slider implementation

Layout Components

Grid

• kendo-grid-import - Import Kendo Grid module
• kendo-grid - Basic Grid implementation
• kendo-grid-filter - Grid with filtering capabilities
• kendo-grid-group - Grid with grouping capabilities
• kendo-grid-edit - Grid with editing capabilities

Menu

• kendo-menu-import - Import Kendo Menu module
• kendo-menu - Basic Menu implementation
• kendo-menu-horizontal - Horizontal Menu implementation

Tabs

• kendo-tabs-import - Import Kendo Tabs module
• kendo-tabs - Basic Tabs implementation
• kendo-tabs-dynamic - Tabs with dynamic content

Accordion

• kendo-accordion-import - Import Kendo Accordion module
• kendo-accordion - Basic Accordion implementation
• kendo-accordion-dynamic - Accordion with dynamic content

Card

• kendo-card-import - Import Kendo Card module
• kendo-card - Basic Card implementation
• kendo-card-actions - Card with actions

Drawer

• kendo-drawer-import - Import Kendo Drawer module
• kendo-drawer - Basic Drawer implementation

Sidebar

• kendo-sidebar-import - Import Kendo Sidebar module
• kendo-sidebar - Basic Sidebar implementation

Stepper

• kendo-stepper-import - Import Kendo Stepper module
• kendo-stepper - Basic Stepper implementation

Data Visualization

Charts

• kendo-charts-import - Import Kendo Charts module
• kendo-chart - Basic Chart implementation
• kendo-chart-line - Line Chart implementation
• kendo-chart-bar - Bar Chart implementation
• kendo-chart-pie - Pie Chart implementation

TreeView

• kendo-treeview-import - Import Kendo TreeView module
• kendo-treeview - Basic TreeView implementation
• kendo-treeview-checkbox - TreeView with checkboxes

Image Gallery

• kendo-gallery-import - Import Kendo Image Gallery module
• kendo-gallery - Basic Image Gallery implementation

Navigation

Pagination

• kendo-pager-import - Import Kendo Pagination module
• kendo-pager - Basic Pagination implementation
• kendo-pager-custom - Pagination with custom page sizes

ProgressBar

• kendo-progressbar-import - Import Kendo ProgressBar module
• kendo-progressbar - Basic ProgressBar implementation
• kendo-progressbar-animation - ProgressBar with animation

Spinner

• kendo-spinner-import - Import Kendo Spinner module
• kendo-spinner - Basic Spinner implementation
• kendo-spinner-custom - Spinner with custom size

Feedback

Toast

• kendo-toast-import - Import Kendo Toast module
• kendo-toast - Basic Toast implementation
• kendo-toast-template - Toast with custom template

Alert

• kendo-alert-import - Import Kendo Alert module
• kendo-alert - Basic Alert implementation

Dialog

• kendo-dialog-import - Import Kendo Dialog module
• kendo-dialog - Basic Dialog implementation
• kendo-dialog-custom - Dialog with custom content

Modal

• kendo-modal-import - Import Kendo Modal module
• kendo-modal - Basic Modal implementation
• kendo-modal-custom - Modal with custom content

Tooltip

• kendo-tooltip-import - Import Kendo Tooltip module
• kendo-tooltip - Basic Tooltip implementation
• kendo-tooltip-custom - Tooltip with custom position

File Handling

File Upload

• kendo-upload-import - Import Kendo File Upload module
• kendo-upload - Basic File Upload implementation
• kendo-upload-multiple - File Upload with multiple files

Usage

TypeScript Snippets

Import statements for all components:

• kendo-grid-import
• kendo-datepicker-import
• kendo-dropdown-import
• And more...

HTML Snippets

Basic component usage:

• kendo-grid
• kendo-datepicker
• kendo-dropdown
• And more...

Advanced configurations:

• kendo-grid-filter
• kendo-grid-group
• kendo-grid-edit
• And more...

Requirements

• Visual Studio Code 1.60.0 or higher
• Angular project with Kendo UI for Angular installed

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X)
3. Search for "Kendo Angular Snippets"
4. Click Install

Configuration

The extension provides snippets in both TypeScript and HTML files. Each component has:

• Basic implementation snippet
• Advanced configuration snippet
• Import statement snippet

Examples

Basic Grid

<kendo-grid
  [data]="data"
  [height]="400"
  [pageable]="true"
  [sortable]="true">
  <kendo-grid-column
    field="field"
    title="Title"
    width="100">
  </kendo-grid-column>
</kendo-grid>

Grid with Filtering

<kendo-grid
  [data]="data"
  [height]="400"
  [pageable]="true"
  [sortable]="true"
  [filterable]="true"
  [filter]="filter">
  <kendo-grid-column
    field="field"
    title="Title"
    width="100"
    [filter]="'text'">
  </kendo-grid-column>
</kendo-grid>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This extension is licensed under the MIT License - see the LICENSE file for details.

Support

For issues and feature requests, please contact the extension author directly.

Acknowledgments

• Kendo UI for Angular
• Visual Studio Code
• Angular
• TypeScript

Resources

• Official Kendo UI for Angular Website
• Official Documentation
• Getting Started Guide
• Demos & Examples