Kendo UI Productivity Tools for Visual Studio Code

Overview of Kendo UI Productivity Tools

The Kendo UI Productivity Tools extension increase developer productivity and simplify the process of creating projects with Kendo UI components.

To use Telerik and Kendo UI components and tools without disruption, you need to apply a valid license key file (LKF) to both new and existing projects. You don't need a license key to access KendoReact Free components.

The Kendo UI extension can automatically download and manage your license key. Simply log in to your Telerik or Kendo UI account within Visual Studio to enable this feature. Alternatively, you can manually download and apply a license key file. Note that when working with KendoReact Free, you don't need to log in or configure a license key.

The tools are available as a VS Code extension for Windows, Linux, and Mac.

Flavors

The Kendo UI Productivity Tools cover all Kendo UI flavors:

• Kendo UI for Angular
• KendoReact
• Kendo UI for Vue
• Kendo UI for jQuery

All Kendo UI components (except KendoReact Free) require an active commercial or trial license. See the Kendo UI Pricing page for information.

Features

The Kendo UI Productivity Tools provide the following features:

• Configure MCP Server—The extension automates the MCP server setup.
• Project Templates—The wizard provides a customizable starting template for all Kendo UI flavors.
• Code Snippets—The pack contains a collection of Kendo UI code snippets for fast UI component reference and configuration.
• Scaffolders—The scaffolders enable you to quickly add components to your apps.

The extension automates the MCP server setup for you. The MCP Server enables you to use the AI Coding Assistant — an AI-powered code generator that provides proprietary context to produce high-quality code samples using Kendo UI components and APIs.

Kendo UI for Angular and KendoReact MCP Configuration

Provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the Telerik MCP server for enhanced developer productivity with Kendo UI components.

Configure MCP Server

The Kendo UI: Configure MCP Server command provides two configuration scopes to set up the Kendo UI MCP Server:

• Workspace—Creates an mcp.json file in a .vscode folder in your current workspace. This configuration applies only to the current workspace.
• Global—Creates an mcp.json file in your operating system user folder (for example, C:\Users\___\AppData\Roaming\Code\User\.mcp.json on Windows or /Users/___/Library/Application Support/Code/User/mcp.json on macOS). This configuration applies to all VS Code workspaces.

Add GitHub Copilot Custom Instructions

The Kendo UI: Add GitHub Copilot Custom Instructions - command generates a copilot-instructions.md file in the .github folder under the solution. This file contains custom instructions that help GitHub Copilot provide better assistance when working with Kendo UI components. The generated file includes the following default instructions:

• Guidance to use the MCP Server whenever applicable
• Guidance to prioritize the usage of Kendo UI components
• Guidance to use best coding practices

If the file already exists, the default Kendo Copilot instructions will be added to the existing content.

Kendo UI Project Templates

The Kendo UI Template Wizard lets you create new projects that are pre-configured for Kendo UI components. You start from a blank project template, which you can extend with blank or component-based pages. You can also configure your preferred theme from the start.

1. In VS Code, open the Command Palette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
2. Select Kendo UI Template Wizard: Launch and press Enter.
3. Type a name for your project and choose a directory for the output path.
4. Select the target Kendo UI suite: Kendo UI for Angular, KendoReact, Kendo UI for Vue, or Kendo UI for jQuery. Depending on selected target Kendo UI suite there are different options:

Kendo UI for Angular and Kendo UI for Vue:

1. Select the "Blank Project" option.
2. Select the Kendo UI theme: Default, Bootstrap, Material or Fluent.
3. Click Create Project to generate the new project.

This creates a ready-to-run application with all required configurations and dependencies. You can immediately start using the Kendo UI components.

KendoReact

KendoReact Create New Project Wizard

1. Select your product tier. This affects the dependencies installed in your project and disables or enables the built-in license key management (disabled for KendoReact Free).
   • KendoReact Free is a free version of the KendoReact component library and includes 50+ customizable, enterprise-grade React components. Using the components and features in this tier does not require any sign-up or license.
   • KendoReact provides the complete set of 120+ React components. This tier requires a valid commercial license or an active trial license.
2. Select your preferred React framework integration: NextJS, Astro, or Vite. Available for both tiers.
3. Based on the selected integration, finalize your project settings. Note that the different product tiers install different dependencies.
4. Select the Kendo UI theme: Default, Bootstrap, Material or Fluent.
5. Click Create Project.

This creates a ready-to-run application with all required configurations and dependencies. You can immediately start using the KendoReact components, free or premium.

Kendo UI for jQuery

The Create New Project Wizard for Kendo UI for jQuery provides the following project templates:

• Blank Template - A simple ASP.NET MVC project with no pages with included Kendo UI for jQuery scripts and stylesheets.
• Admin Template - A complex ASP.NET MVC application with multiple views which include a Task Dashboard, Products and Performance statistics as well as an Account Settings page (back-end is not included). The project showcases many Kendo UI for jQuery components, including Grid, Charts, and many navigational components.
• Dashboard Template - An ASP.NET MVC project which mocks a Team Efficiency report, with a ListView component that contains team members, and a Scheduler and Chart components that represent task and performance information.
• Dashboard Layout Template - An ASP.NET MVC project that represents various data displayed through multiple Chart components, which are placed in a TileLayout.
• Grid Template - An ASP.NET MVC project that demonstrates a simple Grid configuration.
• Standard Template - An ASP.NET MVC project that showcases some of the navigational components in the Kendo UI for jQuery suite, such as PanelBar, Menu, TabStrip, and TreeView.

Kendo UI Code Snippets

Our team continues the work on expanding the code snippets for all flavors by adding more components and configuration variations.

The Kendo UI Productivity Tools provide code snippets to simplify and accelerate the implementation of Kendo UI components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source code, while also including predefined tab stops for the required options

1. In the source core in the IDE, type the respective snippet prefix for the currently used Kendo UI suite.
   • ka-—Lists the available Kendo UI for Angular snippets.
   • kj-—Lists the available Kendo UI for jQuery snippets.
   • kr-—Lists the available KendoReact snippets.
   • kv-—Lists the available Kendo UI for Vue snippets.
2. Continue by typing the name of the component that you want to insert. For some components, the pack provides multiple snippets (for example: kj-grid and kj-grid-remote).
3. Press Enter to insert the desired component in the source code.
4. If the component provides placeholders for specific properties, cycle through them and set their values by pressing the Tab key.

Kendo UI for Angular Snippets Catalog

The complete snippets catalog and more information about the Telerik UI for Angular components is available here.

KendoReact Snippets Catalog

The complete snippets catalog and more information about the KendoReact components is available here.

Kendo UI for Vue Snippets Catalog

The complete snippets catalog and more information about the Kendo UI for Vue components is available here.

Kendo UI for jQuery Snippets Catalog

• kj-autocomplete: AutoComplete bound to Remote Data
• kj-button: Button
• kj-checkbox: CheckBox
• kj-checkboxgroup: CheckBoxGroup
• kj-colorpicker: ColorPicker
• kj-combobox: ComboBox bound to Remote Data
• kj-dialog: Dialog
• kj-form: Form
• kj-grid: Grid bound Local Data
• kj-grid-remote: Grid bound to Remote Data
• kj-gridcolumn: Grid Column
• kj-gridcolumn-frozen: Frozen Grid Column
• kj-datepicker: DatePicker
• kj-daterangepicker: DateRangePicker
• kj-datetimepicker: DateTimePicker
• kj-dateinput: DateInput
• kj-dropdownlist: DropDownList bound to Remote Data
• kj-dropdowntree: DropDownTree
• kj-editor: Editor
• kj-maskedtextbox: MaskedTextBox
• kj-multicolumncombobox: MultiColumnComboBox
• kj-multiselect: MultiSelect
• kj-numerictextbox: NumericTextBox
• kj-rating: Rating
• kj-radiobutton: RadioButton
• kj-radiogroup: RadioGroup
• kj-switch: Switch
• kj-textarea: TextArea
• kj-textbox: TextBox
• kj-timepicker: TimePicker
• kj-upload: Upload
• kj-window: Window

Kendo UI Scaffolders

Our team continues the work on expanding the Scaffolders for all flavors by adding more components, configuration options, and data-binding variations.

Scaffolders ease the process of generating and integrating new Kendo UI components in existing projects. The tool enables you to create complex Kendo UI components with a lot of repetitive configuration (like the Grid, Chart, Inputs, and others), by selecting options from a seamless interactive wizard-like UI. The scaffolder functionality is a great way to get started with the Kendo UI components for the first time and experiment with their features.

Scaffolders for Kendo UI for Angular

The Kendo UI for Angular Scaffolders enable you to quickly add a Grid, Chart, or Scheduler to your app. The Scaffolder utilizes the Angular Schematics code generation capabilities.

1. In VS Code, in the Explorer, right-click a folder in your Angular app.
2. Select New Kendo UI for Angular Project Item.
3. In the Kendo UI for Angular Scaffolding tab, configure your preferred options and click Create.

For more information, see this documentation page.

Scaffolders for KendoReact

The KendoReact Scaffolders enable you to quickly add components to your existing app.

1. In VS Code, in the Explorer, right-click a folder in your React app.
2. Select New KendoReact Project Item.
3. In the KendoReact Scaffolding tab, configure your preferred options and click Create. Components from the premium KendoReact tier are clearly marked with the respective badge.

For more information, see this documentation page.

Available Scaffolded Components (KendoReact Free vs. Premium)

The following components can be generated using the Scaffolding Tool:

Scaffolders for Kendo UI for Vue

The Kendo UI for Vue Scaffolders enable you to quickly add components to your existing app.

1. In VS Code, in the Explorer, right-click a folder in your Vue app.
2. Select New Kendo UI for Vue Project Item.
3. In the Kendo UI for Vue Scaffolding tab, configure your preferred options and click Create.

For more information, see this documentation page.

Scaffolders for Kendo UI for jQuery

The Kendo UI for jQuery Scaffolders enable you to quickly add components to your existing app.

1. In VS Code, in the Explorer, right-click a folder in your jQuery app.
2. Select New Kendo UI for jQuery Project Item.
3. In the Kendo UI for jQuery Scaffolding tab, configure your preferred options and click Create.

The Scaffolder generates an .html and .js file. Based on your project structure, you might need to move them to separate folders.

In the VS Code generated jQuery apps, it is best to generate the component in the src folder and manually move the .html file to the pages folder.

For more information, see this documentation page.

Extensions Settings

The Kendo UI Productivity Tools extension now includes configurable settings for managing product update notifications directly within Visual Studio Code. This update provides users with greater control over their development environment, allowing them to easily enable or disable update alerts according to their preferences.

1. Go to setting menu in VS Code and select "Settings" option from the context menu.

2. Go to "User" -> "Extensions" section:

3. Select "Kendo UI Productivity Tools":

4. See the option that lets the user to enable or disable the product update notifications.

Help Resources

• Telerik Community Forums
• Suggest a Feature
• Contact the Kendo UI Support

License

This code is distributed under the terms and conditions of the Progress Software Corporation End User License Agreement for Visual Studio Code Extensions.