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:

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:

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
In the menu, look for and select Kendo UI Template Wizard: Launch and press Enter
Choose a name for your project and a directory for an output path
Pick one of the listed Kendo UI suites - Kendo UI for Angular, KendoReact, Kendo UI for Vue or Kendo UI for jQuery
Select the pages that should be included in the new project. The current available options are Blank, Grid, Chart and Form
Select the Kendo UI theme to be applied. You can choose between Default, Bootstrap and Material themes
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 availbale code snippets, follow the steps below:

Click inside the source-code in the IDE, where the component should be inserted
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- - Upcoming in R3 2022
- kv- - Upcoming in R3 2022
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
Press Enter to insert the desired component in the source-code
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

Scaffolders (Beta)

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.

Kendo UI for Angular

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.

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.