Kendo UI Productivity Tools for Visual Studio Code

Overview

The Kendo UI Productivity Tools extension simplifies the process of creating new Kendo UI projects and eases the development in existing ones. It can be installed and launched on Windows, Linux and Mac. You could consider this an all-in-one extension, which covers all available Kendo UI flavors:

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

Features

The Kendo UI Productivity Tools include three main features:

Template Wizard

The Template Wizard eases development efforts by providing аn interface for creating new projects that are pre-configured for Kendo UI components. The Template Wizard provides a Blank project template, which could be further enhanced by the addition of more pages with Grids, Charts, Forms etc. You can easily configure the desired theme for your application by choosing from Default, Bootstrap or Material themes. The end result is a ready-to-run application with all required configurations and dependencies. This enables you to immediately start using the Kendo UI components.

To create a new Kendo UI project follow the steps below:

1. Access the Template Wizard from the Visual Studio Code Extensions menu. To open the menu, use Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac
2. In the menu, look for and select Kendo UI Template Wizard: Launch and press Enter
3. Choose a name for your project and a directory for an output path
4. Pick one of the listed Kendo UI suites - Kendo UI for Angular, KendoReact, Kendo UI for Vue or Kendo UI for jQuery
5. Select the pages that should be included in the new project. The current available options are Blank, Grid, Chart and Form
6. Select the Kendo UI theme to be applied. You can choose between Default, Bootstrap and Material themes
7. Finally, click on Create to generate the new project

Snippets

The Kendo UI Productivity Tools extension provides a handy feature to improve the daily development with our library – code snippets. Snippets 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.

To take advantage of the tens available code snippets, follow the steps below:

1. Click inside the source-code in the IDE, where the component should be inserted
2. Type the respective snippet prefix for the currently used Kendo UI suite. Those are:
   • 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
3. Continue by typing the name of the component that should be inserted. Some components are provided by multiple snippets, which allow you to create them in multiple ways, depending on the desired configuration e.g. kj-grid and kj-grid-remote
4. Press Enter to insert the desired component in the source-code
5. Optionally, if the component provides placeholders for specific properties, you could iterate and provide them by pressing the Tab key

Our snippets library consists of many components such as Grid, Inputs, Layouts etc. More will be available in upcoming months.

More information about the available snippets can be found below:

Kendo UI for Angular

A full list of the available Kendo UI for Angular snippets and their usage can be found in our documentation.

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

KendoReact

A full list of the available KendoReact snippets and their usage can be found in our documentation.

Kendo UI for Vue

A full list of the available Kendo UI for Vue snippets and their usage can be found in our documentation.

Scaffolders

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 Grid, Chart etc.), 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 (Beta)

The Scaffolders feature is currently in beta and is only available for the Kendo UI for Angular suite. It utilizes the Angular Schematics code generation capabilities. The Scaffolder enables you to configure and generate a Grid with local data binding. Additional information is available in our dedicated documentation.

Our team continues the work on expanding the Scaffolders functionalities in the upcoming months by adding additional configuration options, data-binding variations, as well as more components.

Scaffolders for KendoReact

The Scaffolders feature of KendoReact enables you to quickly add components to your existing app.

Right-click on a folder of your React app in the VSCode Explorer panel.

Then select the desired KendoReact component you wish to add to your project.

Scaffolders for Kendo UI for jQuery

The Scaffolders feature of Kendo UI for jQuery enables you to quickly add components to your existing app.

Right-click on a folder of your jQuery app in the VS Code Explorer panel.

Then select the desired Kendo UI for jQuery component you wish to add to your project.

The scaffolder generates an .html and .js file, based on your project structure you may 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 move the .html file by hand to the pages folder.

Scaffolders for Kendo UI for Vue

The Scaffolders feature of Kendo UI for Vue enables you to quickly add components to your existing app.

Right-click on a folder of your Vue app in the VS Code Explorer panel.

Then select the desired Kendo UI for Vue component you wish to add to your project.

Request a Feature / Submit Feedback

You can request a feature or submit feedback using the Kendo UI support system

License

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